使用扩展运算符创建新对象时丢失原有属性问题排查

核心原因 #

你遇到的属性丢失问题，本质是File对象是浏览器内置的特殊类型：它的大部分属性（如size、type、lastModified）并非自身的可枚举属性，而是通过原型链继承或被定义为不可枚举。普通对象扩展运算符...只能复制对象自身的可枚举属性，因此直接用...duplicateFile只能拿到name这类少数可枚举属性，其他属性会丢失。

解决方案 #

不要用对象扩展运算符复制File对象，而是通过new File()构造函数创建新文件对象，完整保留原文件的二进制数据与关键属性：

const beforeUpload = (event: any) => {
  const file: any = event?.target?.files[0];
  const duplicateFile = fileList.find(files => files.name === file?.name);
  
  if (duplicateFile) {
    // 用File构造函数创建新对象，保留原文件数据与属性
    const updatedFile = new File(
      [duplicateFile], // 传入原文件的二进制内容
      `${duplicateFile.name}(${duplicateCount})`, // 修改后的文件名
      {
        type: duplicateFile.type,
        lastModified: duplicateFile.lastModified
      }
    );
    console.log(updatedFile); // 此时会包含完整的File属性
    setDuplicateCount(prev => prev + 1); // 用函数式更新避免闭包导致的计数偏差
    
    // 补充：将updatedFile替换到fileList中（根据你的状态管理逻辑调整）
    // 示例：setFileList(prev => prev.map(f => f === duplicateFile ? updatedFile : f));
  }

  if (!file) {
    return;
  }
};

额外提示 #

• 若需要保留更多原File对象的属性（如部分浏览器支持的lastModifiedDate），可在构造函数的第三个参数中手动添加对应配置。
• 更新计数时使用函数式更新，能避免因React闭包特性导致的计数不准确问题。

内容的提问来源于stack exchange，提问作者aravinda nawarathna