sending array data with multipart/form-data post request in Axios vue.js

Question

I'm sending a post request from vue.js project using Axios and it contains a file upload, which requires me to use FormData, I found a nice answer that helped me with FormData:

const getFormData = object => Object.keys(object).reduce((formData, key) => {
     formData.append(key, object[key]);
     return formData;
}, new FormData());

and for the headers: headers: { 'Content-Type': 'multipart/form-data'}.

The POST call looks like this:

axios.post("http://127.0.0.1:8000/api/document/",
      getFormData(this.documentData),
      {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log("Successfully uploaded: ", response.data)
      })
      .catch(err => {
        console.log("error occured: ", err)
      })

This is the data I'm sending:

documentData: {
      name: '',
      file: '',
      version: '',
      company: '',
      author: '',
      category: []
    }

When sending the data with single category id, it works fine, but when I send multiple category ids the following error shows:

"category": [
    "Incorrect type. Expected pk value, received str."
]

How can I solve this problem?

What format does the server-side process expect for the category? Is it expecting a JSON array or multiple category entries? — Phil
– Phil, Commented Dec 17, 2020 at 6:39

Phil · Accepted Answer · 2020-12-17 06:49:09Z

6

Assuming your server-side process is expecting multiple, repeated field names for array types, you'll want something like this

const getFormData = object => Object.entries(object).reduce((fd, [ key, val ]) => {
  if (Array.isArray(val)) {
    val.forEach(v => fd.append(key, v))
  } else {
    fd.append(key, val)
  }
  return fd
}, new FormData());

Some server-side processes (PHP for example) require that collection-type fields include a [] suffix. If that's what you're working with, change this line

val.forEach(v => fd.append(`${key}[]`, v))

Also, when sending FormData from your browser, do not manually set the Content-type header. Your browser will do this for you, including the required boundary tokens

axios.post("http://127.0.0.1:8000/api/document/", getFormData(this.documentData))
  .then(response => {
    console.log("Successfully uploaded: ", response.data)
  })
  .catch(err => {
    console.error("error occurred: ", err)
  })

edited Dec 17, 2020 at 6:49

answered Dec 17, 2020 at 6:43

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Usoof Over a year ago

Thank you for your answer. It works like a charm.

Nashaat Mohamed · Accepted Answer · 2020-12-18 03:53:59Z

0

you can use json stringfy , I am using it also with vue app

formData.append("TeamMembers", JSON.stringify(this.TeamMembers));

 axios
 .post("/api/pro", formData, {
  onUploadProgress: (progressEvent) => console.log(progressEvent.loaded),
  headers: { "Content-Type": "multipart/form-data", },  })

Team members is an array .. and you can parse it in the other side this way

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

answered Dec 18, 2020 at 3:53

Nashaat Mohamed

3312 silver badges6 bronze badges

Comments

zcw · Accepted Answer · 2020-12-17 06:49:01Z

-3

Object array passes values

    
var arr=['上海','北京'];
var formData = new FormData();
for (var i = 0; i < arr.length; i++) {
 formData.append('city[]',arr[i]);
}

answered Dec 17, 2020 at 6:49

zcw

14

Collectives™ on Stack Overflow

sending array data with multipart/form-data post request in Axios vue.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related