使用fs读取文件后通过FormData上传至PHP服务器报错咨询

问题代码与报错 #

本地文件读取代码：

var localFile = "/Desktop/here/myfile.jpg";

const buffer = fs.readFileSync(localFile);
const fileName = 'thumb.jpg';

尝试添加到FormData的代码：

formData.append('file', buffer, {
  contentType: 'text/plain',
  name: 'file',
  filename: fileName,
});

触发错误：

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

你可能疑惑：readFileSync不是应该生成Blob吗？

原因说明 #

fs.readFileSync返回的是Node.js环境特有的Buffer对象，而浏览器（或Electron渲染进程）中的FormData API要求第二个参数必须是Blob/File类型，这两种对象分属不同运行环境，不能直接兼容。

解决方法 #

把Node.js的Buffer转换成浏览器可识别的Blob对象，再添加到FormData：

// 将Buffer转为Blob，注意设置正确的MIME类型，这里是jpg所以用image/jpeg
const blob = new Blob([buffer], { type: 'image/jpeg' });

// 再添加到FormData
formData.append('file', blob, fileName);

另外注意：你之前设置的contentType: 'text/plain'不符合jpg文件的类型，改成对应图片的MIME类型（如image/jpeg）更合理。

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