Запрос 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 , что

Примечание. Если в качестве данных, добавляемых в объект FormData, указывается BLOB-объект, имя файла, которое будет сообщаться серверу в заголовке «Content-Disposition», используется для разных браузеров.

Но я не уверен, что это является причиной моей проблемы здесь?

Answer 1

Welp, вот что происходит, когда ваши глаза смотрят на экран слишком долго.

  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

Answer 2

Похоже, что вы публикуете неопределенную переменную под названием data, а не uploadData