如何将React state中的allValues与FormData合并后通过axios提交

问题需求 #

需要将React组件state中存储的allValues对象与FormData实例合并为一个整体，再通过axios发起post请求提交，现有代码如下：

state初始化代码 #

constructor(props) {
    super(props);
   
    this.state = {
        allValues: {
            name: "",
            class: "",
            school: ""
        },
    }
}

现有axios请求代码 #

let formData = new FormData();
axios
  .post(
    'url',
    formData, //appand formdata and allValues

    {
      headers: {
        Authorization: `token ` + localStorage.getItem('token'),
        'Content-type': 'multipart/form-data',
      },
    }
  )
  .then((res) => {
    console.log(`Success` + res.data);
  });

实现方法 #

你只需要遍历allValues的所有键值对，逐一添加到FormData实例中即可，具体代码如下：

let formData = new FormData();

// 合并state中的allValues到FormData
Object.entries(this.state.allValues).forEach(([key, value]) => {
  formData.append(key, value)
})

// 此处可继续添加其他FormData字段，比如上传的文件、额外参数等
// formData.append('avatar', file)

axios
  .post(
    'url',
    formData,
    {
      headers: {
        Authorization: `token ${localStorage.getItem('token')}`,
        // 无需手动设置Content-type，axios会自动识别FormData并添加带boundary参数的正确请求头
      },
    }
  )
  .then((res) => {
    console.log(`Success` + res.data);
  })

注意事项 #

如果你的allValues中存在嵌套对象/数组类型的值，不能直接append，需要先转为JSON字符串：

formData.append(key, JSON.stringify(value))

后端接收到后再做JSON解析即可。

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