尝试发送文件时 FormData 发送空请求

Question

我正在尝试使用 FormData 和 Axios 发送表单。

const formData = new FormData();
formData.append("title", title);
formData.append("image", image);
Axios.post("https://httpbin.org/anything", formData, { headers: { 'Content-Type': 'multipart/form-data'}}).then(res => console.log(res))

我只能发送标题，但是当我尝试发送文件时，字段和文件都是空的。

{
    "data": {
        "args": {},
        "data": "",
        "files": {},
        "form": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Accept-Encoding": "gzip, deflate, br",
            "Accept-Language": "en-US,en;q=0.9",
            "Content-Length": "391538",
            "Content-Type": "multipart/form-data",
            "Host": "httpbin.org",
            "Origin": "http://localhost:3000",
            "Referer": "http://localhost:3000/",
            "Sec-Fetch-Dest": "empty",
            "Sec-Fetch-Mode": "cors",
            "Sec-Fetch-Site": "cross-site",
            "Sec-Gpc": "1",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36",
            "X-Amzn-Trace-Id": "Root=1-626e5d21-415864664fc4b63a67320e2f"
        },
        "json": null,
        "method": "POST",
        "origin": "177.67.149.125",
        "url": "https://httpbin.org/anything"
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "content-length": "846",
        "content-type": "application/json"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "multipart/form-data"
        },
        "method": "post",
        "url": "https://httpbin.org/anything",
        "data": {}
    },
    "request": {}
}

我已经检查过，title 和 image 变量的值都是正确的。

仅发送标题：

const formData = new FormData();
formData.append("title", title);
// formData.append("image", image);
Axios.post("https://httpbin.org/anything", formData).then(res => console.log(res))

{
    "data": {
        "args": {},
        "data": "",
        "files": {},
        "form": {
            "------WebKitFormBoundarybAprNbVe1IfwISUt\r\nContent-Disposition: form-data; name": "\"title\"\r\n\r\ndsadsadsa\r\n------WebKitFormBoundarybAprNbVe1IfwISUt--\r\n"
        },
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Accept-Encoding": "gzip, deflate, br",
            "Accept-Language": "en-US,en;q=0.9",
            "Content-Length": "145",
            "Content-Type": "application/x-www-form-urlencoded",
            "Host": "httpbin.org",
            "Origin": "http://localhost:3000",
            "Referer": "http://localhost:3000/",
            "Sec-Fetch-Dest": "empty",
            "Sec-Fetch-Mode": "cors",
            "Sec-Fetch-Site": "cross-site",
            "Sec-Gpc": "1",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36",
            "X-Amzn-Trace-Id": "Root=1-626e6025-1e53db8e2ef076b275db4982"
        },
        "json": null,
        "method": "POST",
        "origin": "177.67.149.125",
        "url": "https://httpbin.org/anything"
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "content-length": "1027",
        "content-type": "application/json"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/x-www-form-urlencoded"
        },
        "method": "post",
        "url": "https://httpbin.org/anything",
        "data": {}
    },
    "request": {}
}

每当我设置 Content-Type 时，我都会在响应中得到空文件和表单，即使我只发送标题也是如此。

有人知道我该如何解决吗？

Answer 1

将您的 Axios 更新到最新版本 (v0.27.2)。两者都按预期工作 Demo

axios
    .postForm("https://httpbin.org/post", {
      name: "test",
      timestamp: Date.now(),
      "myData{}": { foo: "bar", baz: "qux" },
      "files[]": document.querySelector("#fileInput").files
    })

Demo

  const formData = new FormData();

  formData.append("title", "test");
  formData.append("file", document.querySelector("#fileInput").files[0]);

  axios
    .post("https://httpbin.org/post", formData, {
      headers: { "Content-Type": "multipart/form-data" }
    })

尝试发送文件时 FormData 发送空请求

FormData sending empty request when trying to send file

form-data

node.js

express

reactjs

axios