Axios 请求未收到设置了内容类型的 formData

Question

我将以下数据添加到我的 formData()

let uploadData = new FormData();
uploadData.append("peer-video", this.state.peerVideo);
uploadData.append("peer-video-thumbnail", this.state.peerVideoThumbnail);
uploadData.append("project-video", this.state.projectVideo);
uploadData.append(
  "project-video-thumbnail",
  this.state.projectVideoThumbnail
);
this.state.documents.forEach(item => {
  uploadData.append("documents", item);
});

uploadData 里面有键值对，我做了 formData.entries() 来检查这个。而我的axios请求如下：

   export const addProject = data => dispatch => {
  axios
    .post("/api/portfolio/add-project", data, {
      headers: {
        "Content-Type": `multipart/form-data`
      }
    })
    .then(res => {
      dispatch({
        type: ADD_PROJECT,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: ADD_PROJECT,
        payload: err
      });
    });
};

如果我转到网络选项卡中的有效负载，我会看到：

{"uploadData":{}}

有什么建议吗？感谢您花时间帮助我。

编辑我在 axios 请求中尝试了以下结构，它产生了相同的结果。

axios({
    method: "post",
    url: "/api/portfolio/add-project",
    data: data,
    config: { headers: { "Content-Type": "multipart/form-data" } }
  })

当我执行以下操作时

   for (let keys of uploadData.entries()) {
      console.log(keys);
    }

这些是值：

我还在 formData docs 上注意到

Note: If you specify a Blob as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

但我不确定这是否是导致我出现此问题的原因？

Answer 1

看起来您发布的是一个名为 data 的未定义变量，而不是您的 uploadData

Answer 2

好吧，当你的眼睛盯着屏幕看得太久时就会出现这种情况。

  this.props.addProject({
      title: this.state.title,
      company: this.state.company,
      description: this.state.description,
      role: this.state.role,
      skills: this.state.skills,
      uploadData: uploadData
    });

需要简单地是： this.props.addProject(uploadData)

谢谢@vortex

Axios 请求未收到设置了内容类型的 formData

Axios request not receiving formData with content-type set

javascript

multipartform-data

form-data

redux

axios