[Vuejs]-Sending multiple files to Laravel backed using Vue.js

0👍

Try this case:

var objectToFormData = function (obj, form, namespace) {

var fd = form || new FormData();
var formKey;

for (var property in obj) {
    if (obj.hasOwnProperty(property)) {

        if (namespace) {
            formKey = namespace + '[' + property + ']';
        } else {
            formKey = property;
        }

        // if the property is an object, but not a File,
        // use recursivity.
        if (typeof obj[property] === 'object' && !(obj[property] instanceof File)) {

            objectToFormData(obj[property], fd, property);

        } else {

            // if it's a string or a File object
            fd.append(formKey, obj[property]);
        }

    }
  }

  return fd;

};

Reference : objectToFormData

Axios :

 axios.post('/businesses', fd, {
          transformRequest: [
             function (data, headers) {
                  return objectToFormData(data);
              }
          ]
 })
.then(response => {
   console.log(response);
   this.completeButton = 'Completed';

})
.catch(error => {
   console.log(error)
   this.completeButton = 'Failed';
})

0👍

Try changing this line:

 fd.append('files[' + i + ']', file);

To this:

 fd.append('files[]', file);

Leave a comment