HTML输入的File与构造函数创建的File有何差异？API验证失败排查

嘿，这个问题我之前踩过类似的坑！你看着两个File对象的preview、name、size、type这些属性都一模一样，但API还是提示type无效，核心问题出在你创建新File时传入的内容完全不是原文件的实际二进制数据。

为什么会出错？ #

• 原File对象是从<input>获取的，它本质上是对用户本地文件的引用，包含了文件的真实二进制内容。
• 你用new File([random integer], file.name, { type: file.type, preview: file.preview })创建新File时，第一个参数是文件的内容主体，你传了随机整数，这就导致新File的二进制内容变成了这个整数的编码数据，和原文件的内容完全不沾边。
• 很多API不会只校验type这个属性，还会读取文件的实际内容来验证类型是否匹配（比如图片文件会检查文件头的二进制标识）。哪怕你把type写对了，内容和类型不匹配，API还是会判定type无效。
• 另外，原File的preview是浏览器生成的临时Blob URL，它指向的是原文件的内容，你把这个属性复制到新File里没有任何意义，新File和原文件没有关联，这个URL对新File来说是无效的。

正确的解决方式 #

如果需要基于原File创建一个新的有效File对象，必须用原文件的真实二进制内容来构造，而不是随便填的数值。你可以直接把原File对象作为内容参数传入：

// 获取原File对象
const originalFile = document.querySelector('input[type="file"]').files[0];

// 基于原文件的真实内容创建新File，可修改name等属性
const newFile = new File([originalFile], originalFile.name, {
  type: originalFile.type,
  lastModified: originalFile.lastModified
});

如果需要修改文件名或者其他元数据，只需要调整对应的参数即可，内容部分始终用原File对象，这样新File的二进制内容和原文件完全一致，API就能正常识别它的类型了。

补充说明 #

如果你需要对原文件的内容做修改（比如裁剪图片、压缩文件），那你需要先处理原文件的二进制数据，再用处理后的Blob/ArrayBuffer来创建新File。比如用FileReader读取原文件的内容，处理后再构造：

const reader = new FileReader();
reader.onload = function(e) {
  // e.target.result就是原文件的ArrayBuffer内容
  const processedContent = e.target.result;
  const newFile = new File([processedContent], "modified-file.png", {
    type: originalFile.type
  });
  // 这里可以把newFile发送给API
};
reader.readAsArrayBuffer(originalFile);

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