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

31moq8wy 于 2022-10-21 发布在 iOS

关注(0)|答案(1)|浏览(179)

我正在尝试使用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": {}
}

我已经检查过了，标题和图像变量都有正确的值。
仅发送标题：

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时，即使我只发送标题，我也会收到响应中的空文件和表单。
有人知道我怎么才能修好它吗？

axios

来源：https://stackoverflow.com/questions/72075895/formdata-sending-empty-request-when-trying-to-send-file

1条答案

按热度按时间

xdnvmnnf1#

将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" }
    })

赞(0）回复(0）举报 2022-10-21

我来回答

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

1条答案

相关问题

热门标签

最新问答