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上注意到

  

    

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

  

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

Answer 1

很高兴，当您的眼睛凝视屏幕太长时间时，会发生这种情况。

java -classpath "$projectroot"/sharedClasses/classes:"$projectroot"/client/classes \
    edu.acme.giulio.client.Main

只需简单地是： 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 });

谢谢@vortex

Answer 2

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