0

I'm trying to upload pdf file in Vue.js and laravel, files_array is defined like this:

 data(){
        return {
           formData: new Form ({
                files_array:'',
                first_name:'',
                last_name :'',

                ...

This is a file select function:

selectFile(e) {
    let pdfFile = e.target.files[0];
    this.formData.files_array= pdfFile;
}

Upload Function :

const header = {
                'Content-Type': 'multipart/form-data',
                'Authorization': 'Bearer ' + this.Data.api_token,
              };
onUpload(){
axios.post(`/upload`, this.formData , {headers: header}).then((response) =>{

});

}

When i try to upload a file then i'm getting

Warning: Missing boundary in multipart/form-data POST in vue.js

I tried following link to

php message Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

but then i'm not getting any data in controller

Any help is highly appreciated.

user3653474
  • 3,393
  • 6
  • 49
  • 135
  • Not familiar with `new Form()` but if it returns a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) object which is what is needed to upload files you can't directly assign values and need to use `FormData.append()`. Any docs available for your `new Form()` method? – charlietfl Nov 07 '20 at 13:52
  • charlietfl: I'm using v-form, link: https://www.npmjs.com/package/vform, i found this link https://stackoverflow.com/questions/44850820/uploading-files-with-vuejs-axios-and-laravel but i'm getting error : append is not a function in Vue.js – user3653474 Nov 07 '20 at 14:01
  • Try using the upload example from github repo https://github.com/cretueusebiu/vform/blob/11689f07a0e4d21e87290e94de917e29f6198b34/example/upload.html. The formData object is created in the internal submit method of that package – charlietfl Nov 07 '20 at 14:12

1 Answers1

0

Remove this header 'Content-Type': 'multipart/form-data', also here is how you should use formData according to MDN

const formData = new FormData(); 
formData.append("imageName",image.current.files[0]);
Ahmed Magdy
  • 1,054
  • 11
  • 16
  • Thanks Ahmed, As i am using v-form and already created object of it as shown in above code in my question, that formData is passed to axios request, how will i append image in my existing formData, can you please take a look at existing code in the question – user3653474 Nov 08 '20 at 11:09