React axios 文件上传失败 - 错误“多部分：未找到边界”答案

【问题标题】：React axios file upload failing - error "Multipart: Boundary not found"React axios 文件上传失败 - 错误“多部分：未找到边界”
【发布时间】：2020-08-19 20:38:51
【问题描述】：

我的代码无法正常工作，它不断从服务器接收 400 并且无法上传。我一定在反应组件中犯了错误，所以请你看看我吗？一切都在 Postman 中工作，所以后端代码看起来不错。

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

const UploadAvatar = () => {
  const [image, setImage] = useState();

  const handleUpload = async (e) => {
    e.preventDefault();
    const config = {
      headers: {
        "content-type": "multipart/form-data",
        Authorization: localStorage.getItem("token"),
      },
    };
    try {
      const formData = new FormData();
      formData.append("avatar", image);
      const response = await axios.post(
        "/users/me/avatar",
        { formData },
        config
      );
      console.log(response);
    } catch (err) {
      console.error(err.message);
    }
  };

  return (
    <div>
      <form onSubmit={handleUpload}>
        Select image to upload:
        <input
          type="file"
          onChange={(e) => setImage(e.target.value)}
          name="fileToUpload"
        />
        <input type="submit" value="Upload Image" name="submit" />
      </form>
    </div>
  );
};

export default UploadAvatar;

【问题讨论】：

您收到的错误信息是什么？并检查卷曲是否与邮递员匹配。
400 错误请求，是的，它匹配 :)
如果 curl 匹配，我认为代码中没有任何问题。您正在发布文件，请尝试将 onChange 函数更改为 onChange={(e) => setImage(e.target.files[0])}。
感谢 Nitesh，但我仍然得到 400 ：/
您是否正确设置了基本 URL？

标签： reactjs file-upload axios

【解决方案1】：

有些事情你需要做。

这与问题无关，但我认为值得检查：

const config = {
      headers: {
        "content-type": "multipart/form-data",
        Authorization: localStorage.getItem("token"),
      },
    }

您的授权是什么方案（Basic、Bearer、OAuth）？

。如果它是承载模式（例如），您的 localStorage.getItem("token") 是仅返回 token 还是返回 "Bearer {token}"？对于不记名令牌，您需要在令牌前包含单词'Bearer'。
content-type 在这里并不是真正需要的，但如果你愿意，你可以放在那里。

在您的代码中，您需要做一些更改：

在你的 handleUpload 中你需要这样做：

try {
      const formData = new FormData();
      formData.append("avatar", image);
      // I just removed the curly brackets from formData
      const response = await api.post("/users/me/avatar", formData, config);
      console.log(response);
} catch (err) {
      console.error(err.message);
}

在您的输入文件类型中：

<input
          type="file"
          onChange={(e) => setImage(e.target.files[0])}
          name="fileToUpload"
/>

对于输入文件类型，目标应该是e.target.files，它返回一个文件列表，每个文件都是一个 FileList 对象。当您只发送一张图片时，您可以将其设置为e.target.files[0] 以获取第一张图片。

仅此而已。它现在应该可以工作了！ :) 我在这里做了一个 poc，一切正常。

【讨论】：

【解决方案2】：

请求错误

这是因为 axios ，你没有发送 json 数据

在您的代码中

const response = await axios.post(
        "/users/me/avatar",
        { formData },<---------here is the problem object
         formData  ,<-------try without curly brazes or use below detailed axios 
        config
      );
      console.log(response);
    } catch (err) {
      console.error(err.message);
    }
  };

更改 axios

axios({
    method: 'post',
    url: 'myurl',
    data: formData ,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

另一个问题

您的发送文件

 <input
          type="file"
          onChange={(e) => setImage(e.target.value)}<-------wrong e.target.files[0]
          name="fileToUpload"
        />

改变如果你发送多个文件

e.target.files

或者如果你发送单个文件使用

e.target.files[0]

更改代码

 <input  type="file"
          onChange={(e) => setImage(e.target.files[0])}
          name="fileToUpload"
        />

【讨论】：