无法修改File对象属性？教你转换为JS对象并截断文件名

File对象无法直接修改的原因 #

浏览器中的File对象属性均为只读，这是安全机制限制，无法直接修改它的name、lastModified等属性。

方案1：生成新的File对象（保留File类型） #

如果需要继续使用File类型（比如用于表单上传、FileReader处理等场景），可以基于原File的内容创建一个新的File实例，同时传入修改后的文件名。

实现代码 #

function truncateFile(file, maxNameLength = 50) {
  // 文件名长度符合要求直接返回原文件
  if (file.name.length <= maxNameLength) return file;

  // 拆分文件名主体和扩展名
  const nameSplit = file.name.split('.');
  const ext = nameSplit.pop();
  const nameBody = nameSplit.join('.');

  // 截断文件名：前半部分取一段，后半部分取一段，中间加_TRUNCATED_
  const truncatedBody = `${nameBody.slice(0, maxNameLength - 15)}_TRUNCATED_${nameBody.slice(-10)}`;
  const newFileName = `${truncatedBody}.${ext}`;

  // 创建新的File对象，复用原文件的Blob内容、类型和修改时间
  return new File([file], newFileName, {
    type: file.type,
    lastModified: file.lastModified
  });
}

// 使用示例
const originalFile = new File(
  [''], 
  'Screenshot_2022-09-18-13-25-22-10_6012fa4d4ddec268fc5c7112cbb265e7_Screenshot_2022-09-18-13-25-22-10_6012fa4d4ddec268fc5c7112cbb265e7.jpeg',
  { type: 'image/jpeg' }
);
const processedFile = truncateFile(originalFile);
console.log(processedFile.name);
// 输出：Screenshot_2022-09-18-13-_TRUNCATED_fa4d4ddec268fc5c7112cbb265e7.jpeg

方案2：转换为普通JavaScript对象（自由修改属性） #

如果不需要保留File类型，直接把File对象转成普通JS对象，就能随意修改任何属性了。

实现代码 #

function convertFileToObj(file) {
  return {
    lastModified: file.lastModified,
    name: file.name,
    size: file.size,
    type: file.type,
    webkitRelativePath: file.webkitRelativePath
  };
}

// 使用示例
const originalFile = new File(
  [''], 
  'Screenshot_2022-09-18-13-25-22-10_6012fa4d4ddec268fc5c7112cbb265e7_Screenshot_2022-09-18-13-25-22-10_6012fa4d4ddec268fc5c7112cbb265e7.jpeg',
  { type: 'image/jpeg' }
);
const fileObj = convertFileToObj(originalFile);

// 处理文件名截断
if (fileObj.name.length > 50) {
  const nameSplit = fileObj.name.split('.');
  const ext = nameSplit.pop();
  const nameBody = nameSplit.join('.');
  fileObj.name = `${nameBody.slice(0, 20)}_TRUNCATED_${nameBody.slice(-10)}.${ext}`;
}

console.log(fileObj);
// 输出修改后的普通JS对象

注意点 #

• 生成新File对象时，只是修改了元信息（文件名），原文件的实际内容不会被改动，也不会重新读取文件
• 普通JS对象不能直接用于需要File类型的API（比如<input type="file">的上传逻辑），这种场景优先用方案1

内容的提问来源于stack exchange，提问作者Hritik Jaiswal