时间戳

首页 > 解决方案 > React axios 文件上传失败 - 错误“多部分：未找到边界”

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

问题描述

我的代码无法正常工作，它不断从服务器接收 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;

标签： reactjsfile-uploadaxios

解决方案

你需要做一些事情。

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

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

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

    . 如果它是 Bearer 模式（例如），localStorage.getItem("token")那么您是仅token返回 还是正在返回"Bearer {token}"？对于不记名令牌，您需要'Bearer'在令牌之前包含单词。

  2. 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，一切正常。

推荐阅读