React中如何将allValues与FormData合并为单个数组后通过axios提交请求

实现思路 #

FormData实例本身支持同时追加文件和普通文本类型的字段，无需将两类数据转为数组合并，直接遍历allValues中的键值对追加到已有FormData实例中即可。

修改后的完整代码 #

let formData = new FormData();
// 追加文件字段
formData.append("antenatalChart", this.state.files.car);
// 批量追加allValues中的普通表单字段
Object.entries(this.state.allValues).forEach(([key, value]) => {
  formData.append(key, value);
});

axios.post("url", formData, {
  headers: {
    Authorization: `token ${localStorage.getItem("token")}`
    // 无需手动设置multipart/form-data请求头，axios会自动为FormData实例生成带boundary的正确请求头
  }
})
.then((res) => {
  console.log(`Success` + res.data);
})
.catch(err => {
  console.error('提交失败：', err);
})

注意事项 #

• 如果后端接口要求普通表单字段统一封装为JSON字符串传递，可以将遍历追加的逻辑改为 formData.append('formInfo', JSON.stringify(this.state.allValues))，其中formInfo为后端约定的字段名
• 如果有多个文件需要上传，也可以用同样的遍历方式处理this.state.files对象，批量追加文件字段，无需手动逐个书写append逻辑
• 不要手动设置Content-type: multipart/form-data，手动填写会丢失请求头中必要的boundary分隔符，导致后端无法正常解析请求数据

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