如何向FormData追加图片文件？现有代码执行失败求助

嘿，我一眼就看出问题啦——你尝试追加的profile.avatar是个FileList对象，但FormData的append()方法只接受单个的File（或Blob）对象，直接传FileList肯定会失败的！

问题根源 #

FileList是个类似数组的集合，通常来自<input type="file">的files属性，哪怕你只选了一张图片，它也会被包装成长度为1的FileList，而不是单个File实例。你的avatar结构也能验证这一点：

avatar: FileList
  0: File {name: "dulux.jpg", lastModified: 1592928192081, …}
  length: 1

修正方案 #

你只需要从FileList里取出对应的单个File对象就行，直接取索引0的元素就好：

let formData = new FormData();
let profile = data.payload;
// 取出FileList里的第一个File对象
formData.append('avatar', profile.avatar[0]);

额外补充：多文件上传场景 #

如果是支持多选文件的场景，你可以循环遍历FileList，把每个文件都追加到FormData里（注意后端字段名要对应，比如用avatar[]方便后端识别多文件）：

let formData = new FormData();
let profile = data.payload;
// 遍历所有选中的文件
for (const file of profile.avatar) {
  formData.append('avatar[]', file);
}

安全小提示 #

为了避免出现Cannot read properties of undefined的报错，你可以先做个简单的判断：

let formData = new FormData();
let profile = data.payload;
if (profile.avatar && profile.avatar.length > 0) {
  formData.append('avatar', profile.avatar[0]);
} else {
  console.log('请先选择要上传的图片哦');
}

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