(ReactJS, Axios) 将文件发布到 API 导致没有负载的 HTTP 请求

Question

我已经为这个问题苦苦挣扎了几个小时，而且我觉得我浏览了所有 Whosebug，因此我在 IT 领域工作了将近十年后，在这里做了我的第一个 post！

长话短说，我必须向我的 API (Express 4/Multer) 发送一个文件（图像），为此我正在使用 Axios。下面是表单提交部分目前的样子：

let avatar = e.target.avatar.files[0];
[...]
if (avatar) {
    let formData = new FormData();
    formData.append("avatar", avatar);
    let customHeaders = {
        
        "Content-Type":
            "multipart/form-data" + ";boundary=xxMyBoundaryxx",
    };
    console.log(avatar); // This is not empty !
    console.log(formData.get('avatar')); // Neither is this !
    axios.post(
        apiUrl,
        formData,
        customHeaders
    );
}

服务器端一切都很好，我使用 Insomnia 测试了将文件上传到我的 apiUrl，它运行得非常好。此外，如果我删除 Content-Type 中的边界参数，它会触发错误 ('Multipart: Boundary not found').

然而，当我 post 我的文件使用上面的代码时，生成的 HTTP 请求没有有效负载，这意味着给我 API 的数据是空的（使用 [=34= 检查]).

我一直在努力理解这个问题，并且希望我的描述不要太含糊，也希望我的英文不是太差

如果您有任何遗漏，请随时联系我

此致，
哈兹瑞斯

PS : 服务器端“多部分：未找到边界”错误消息：

Error: Multipart: Boundary not found
    at new Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:58:11)
    at Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:26:12)
    at Busboy.parseHeaders (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:71:22)
    at new Busboy (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:22:10)
    at multerMiddleware (C:\Workspace\React\Tricks\back\node_modules\multer\lib\make-middleware.js:33:16)
    at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
    at C:\Workspace\React\Tricks\back\node_modules\express\lib\router\index.js:281:22

Answer 1

如果您使用本机 FormData 编码器，则表单边界部分和整个 content-type header 不应由用户定义。

使用 Axios v0.27.2:

 const formData = new FormData();
 formData.append('avatar', avatar);

 axios.post(apiUrl, formData);

或：

 axios.postForm(apiUrl, {
   avatar
 });

或者您可以只提交整个文件列表object

 axios.post(apiUrl, document.querySelector('#fileInput').files);

Playground

(ReactJS, Axios) 将文件发布到 API 导致没有负载的 HTTP 请求

(ReactJS, Axios) Posting file to API result in an HTTP request with no payload

file-upload

express

reactjs

multer

axios