laravel vuejs/axios put request Formdata is empty

Laravel can not handle multipart-formdata well with PUT method. See Input from PUT requests sent as multipart/form-data is unavailable #13457.

If your code actually uses the PUT method, it seems to be affected by this problem.

There are several workarounds.

Dealing with the client side:

• Instead of PUT method, use POST method with _method parameter value set to PUT (called 'method spoofing')

Dealing with the server side:

• Add a package that performs multipart processing to Laravel. (ex. illuminatech/multipart-middleware)
• Use pecl/apfd extension which provides ability to parse 'multipart/form-data' HTTP requests for any request method.

I have changed the axioscall into post and set the value _method:put

addLeads() {      if (this.edit === false) {        // add new leads        this.errors = null;        const constraints = this.getConstraints();        const errors = validate(this.$data.form, constraints);        if (errors) {          this.errors = errors;          return;        }        // multiple file uploading        this.lead = document.getElementById("leadform");        const formData = new FormData(this.lead);        if (this.attachments.length > 0) {          for (var i = 0; i < this.attachments.length; i++) {            let attachment = this.attachments[i];            formData.append("attachments[]", attachment);          }        }        var config = {          headers: { "Content-Type": "multipart/form-data" },          onUploadProgress: function(progressEvent) {            this.percentCompleted = Math.round(              (progressEvent.loaded * 100) / progressEvent.total            );            this.$forceUpdate();          }.bind(this)        };        //end        this.$store.dispatch("lead");        formData.append("_method", "post");        addLeadsAPI(formData, "post", config).then(res => {          swal("Good job!", "You clicked the button!", "success");          this.clearForm();          this.fetchLeads();          //this.attachments = [];        });      } else {        this.errors = null;        const constraints = this.getConstraints();        const errors = validate(this.$data.form, constraints);        if (errors) {          this.errors = errors;          return;        }        console.log("i am in edit");        // multiple file uploading        this.lead = document.getElementById("leadform");        let formData = new FormData(this.lead);        if (this.attachments.length > 0) {          for (var i = 0; i < this.attachments.length; i++) {            let attachment = this.attachments[i];            formData.append("attachments[]", attachment);          }        }        formData.append("_method", "put");        formData.append("id", this.form.id);        console.log(formData);        var config = {          headers: { "Content-Type": "application/x-www-form-urlencoded" },          onUploadProgress: function(progressEvent) {            this.percentCompleted = Math.round(              (progressEvent.loaded * 100) / progressEvent.total            );            this.$forceUpdate();          }.bind(this)        };        //end        console.log(formData);        this.$store.dispatch("lead");        //update        addLeadsAPI(formData, "put", config).then(res => {          swal("Good job!", "You clicked the button!", "success");          this.clearForm();          this.fetchLeads();          //this.attachments = [];        });      }    },

Well, I had an issue trying to update records using axios & vue.js.

The solution is to set the method value on the formData to putand send the request using the post method. Something like this:

console.log("i am in edit");    // multiple file uploading    this.lead = document.getElementById("leadform");    let formData = new FormData(this.lead);    if (this.attachments.length > 0) {      for (var i = 0; i < this.attachments.length; i++) {        let attachment = this.attachments[i];        formData.append("attachments[]", attachment);      }    }    formData.append("_method", "put");    console.log(formData);