Upload File using vue.js and laravel

Question

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.

Not familiar with new Form() but if it returns a FormData 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
– charlietfl, Commented Nov 7, 2020 at 13:52
charlietfl: I'm using v-form, link: npmjs.com/package/vform, i found this link stackoverflow.com/questions/44850820/… but i'm getting error : append is not a function in Vue.js — user3653474
– user3653474, Commented Nov 7, 2020 at 14:01
Try using the upload example from github repo github.com/cretueusebiu/vform/blob/…. The formData object is created in the internal submit method of that package — charlietfl
– charlietfl, Commented Nov 7, 2020 at 14:12

Ahmed Magdy · Accepted Answer · 2020-11-07 14:35:39Z

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]);

answered Nov 7, 2020 at 14:35

Ahmed Magdy

1,32614 silver badges18 bronze badges

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

1 Comment

user3653474 Over a year ago

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

Collectives™ on Stack Overflow

Upload File using vue.js and laravel

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related