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

 收藏

I have the following data being added to my 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);
});

The uploadData has key value pairs in it, I did formData.entries() to check this. And my axios request is as follows:

   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);
    }

These are the values:

I also noticed on formData docs that

注意:如果将Blob指定为要追加到FormData对象的数据,则将在“ Content-Disposition”标头中报告给服务器的文件名因浏览器而异。

但是我不确定这是什么引起我的问​​题吗?

回复
  • 蜡笔小舅@ 回复

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

  • 为你流泪 回复

    哭,这是当您的眼睛凝视屏幕太长时间时发生的情况。

      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
        });
    

    Needed to simply be: this.props.addProject(uploadData)

    谢谢@vortex

    enter image description here