使用带有基本身份验证的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

您的数据已损坏

传递Axios 普通对象或FormData对象。它可以同时处理。

如果属性值之一是FormData对象，它将无法正确地序列化普通对象。

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

您的内容类型已损坏

不要不手动设置Content-Type标头。它将从FormData对象生成（包括用于多部分请求的强制性边界参数）。

您的服务器端代码可能不支持此功能

您需要确保服务器端代码可以处理多部分请求。