如何在ReactJS中设置POST文件上传的upfile参数

你只需要修改onFileUpload方法中formData.append的第一个参数即可，修改后的对应代码如下：

// 点击上传按钮触发的文件上传方法
onFileUpload = () => {
  // 创建formData对象
  const formData = new FormData();
  // 往formData中添加文件参数
  formData.append(
    "upfile", // 此处将原来的"myFile"替换为接口要求的参数名"upfile"即可
    this.state.selectedFile,
    this.state.selectedFile.name
  );
  console.log(this.state.selectedFile);
  // 调用后端上传接口，发送formData对象
  axios.post(`${g_api}/upload/`, formData)
  .then(res =>{
     console.log(res);
  })
  .catch(err=>{
    console.log(err);
  });
};

原理说明 #

FormData.append()方法的第一个参数就是POST请求携带的表单字段名，对应你给出的curl示例中-F upfile=@_mat/test.wav里的upfile字段，原代码中该位置填的是myFile，和后端接口要求的参数名不匹配，替换后即可正常对接接口。

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