Angular响应式表单提交含多图的FormData时无法追加图片数组如何解决

核心调整说明 #

• 后端接收多文件数组时通常要求字段名带[]后缀，否则仅能识别到最后一个追加的文件
• FormData的forEach遍历打印File对象时仅会显示[object File]，无法判断追加结果，需调用getAll()方法验证

修正后代码 #

onSubmit() {
    let itemData = this.itemEntryForm.value;
    const formData = new FormData();
    for (const propertyKey of Object.keys(itemData)) {
      if (propertyKey !== 'image') {
        formData.append(propertyKey, itemData[propertyKey]);
      } else {
        // 批量追加图片文件，字段名适配后端数组接收规则
        itemData.image.forEach(file => {
          formData.append('image[]', file);
        });
        // 验证图片追加结果
        console.log('已上传图片列表：', formData.getAll('image[]'));
      }
    }
    // 后续接口提交逻辑
}

注意事项 #

• 若后端明确要求字段名不带[]，将代码中的image[]替换为image即可，调用formData.getAll('image')同样可以获取所有已追加的图片文件
• 发送请求时不要手动设置Content-Type请求头，浏览器会自动为FormData对象生成带boundary参数的正确请求头，手动设置会导致后端无法正常解析文件

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