时间戳

首页 > 解决方案 > 使用带有基本身份验证的 axios post 上传文件

javascript - 使用带有基本身份验证的 axios post 上传文件

问题描述

我想使用 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>
    );
  }
}

标签： javascriptreactjsaxios

解决方案

您的数据已损坏

将Axios 传递给普通对象或 FormData 对象。它可以处理两者。

它不会正确序列化属性值之一是 FormData 对象的普通对象。

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

您的内容类型已损坏

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

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

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

推荐阅读