Загрузка файла с использованием сообщения Axios с базовой аутентификацией

Question

Я хочу загрузить файл на сервер с помощью почтового запроса axios.

Я использую тег ввода для файла и onChange, устанавливающий состояние.

Если я использую заголовки: {"content-type": "multipart / form-data"}, в axios код выдает ошибку 400.

И если я удаляю его, код работает нормально, но отправляет пустой массив через POST.

import React, { Component } from "react";
import axios from "axios";

export default class Image extends Component {
  state = {
    image: null
  };

  handleFiles = e => {
    this.setState({ image: e.target.files[0] });
  };

  handleUpload = () => {
    var session_url = "https:/localhost:3000/wp-json/gf/v2/entries/";

    const fd = new FormData();
    fd.append("image", this.state.image);

    var entries = {
      form_id: "1",
      15: fd
    };

    axios
      .post(session_url, entries, {
        headers: { "content-type": "multipart/form-data" },

        withCredentials: true,
        auth: {
          username: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          password: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        }
      })
      .then(res => {
        this.setState({ data: res.data });
        console.log(res, "Authenticated");
      })
      .catch(function(error) {
        console.log("Error on Authentication", error.message);
      });
  };
  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFiles} />

        <button onClick={this.handleUpload}>Upload</button>
      </div>
    );
  }
}

Answer 1

Ваши данные повреждены

Pass Axios или простой объект или объект FormData. Он может справиться с обоими.

Он не будет правильно сериализовать простой объект, где одно из значений свойства является объектом FormData.

const entries = new FormData();
fd.append("image", this.state.image);
fd.append("form_id": "1");

Ваш тип контента не работает

Do not устанавливает заголовок Content-Type вручную. Он будет сгенерирован (включая обязательный граничный параметр для составных запросов) из объекта FormData.

Ваш код на стороне сервера может не поддерживать это

Вы должны убедиться, что ваш код на стороне сервера может обрабатывать запрос из нескольких частей.