I'm trying to send a form using FormData and 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))

I can send only the title, but when I try to send the file both the fields and files are empty.

{
    "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": {}
}

I have already checked and both the title and image variables have the correct value.

Sending only the title:

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": {}
}

Whenever I set the Content-Type, I get empty files and form on the response, even if I send only the title.

Does anyone know how I can fix it?

CodePudding user response：

Update your Axios to the latest version (v0.27.2). Both work as expected 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" }
    })