Getting null value in FormData in vue.js

Question

I am facing a big issue in Vue.js that when i am trying to send the data from Upload.vue to my controller in laravel 5.3 i am getting null values in it

My code is

My .vue file :

this.file = document.getElementById('video').files[0];            
var formData = new FormData();
formData.append('video', this.file);
formData.append('uid', this.uid);
console.log(this.file);
console.log(this.uid);
console.log(formData);
this.$http.post('/upload',formData,.....

on console i am getting this :

this is when i print my "this.file"

File
lastModified:1475310793454
lastModifiedDate:Sat Oct 01 2016 14:03:13 GMT+0530 (India Standard Time)
name:"HQim.in.mp4"
size:20773807
type:"video/mp4"
webkitRelativePath:""
__proto__:File

when i console my formData i get this

FormData
__proto__:FormData
append:append()
constructor:FormData()
delete:delete()
entries:entries()
forEach:forEach()
get:get()
getAll:getAll()
has:has()
keys:keys()
set:set()
values:values()
Symbol(Symbol.iterator):()
Symbol(Symbol.toStringTag):"FormData"
__proto__:Object

nothing is available even when i appended i searched a lot but none benefitted i am using "vue": "^1.0.26", "vue-resource": "^1.0.2"

Help me guys

Have a look at developer.mozilla.org/en-US/docs/Web/API/FormData/get — Jitendra Khatri
– Jitendra Khatri, Commented Mar 25, 2017 at 12:34
Actually if i am passing only "uid" without using formdata that is passing but not the "file" so i have to use formdata but it is not working — Light yagami
– Light yagami, Commented Mar 25, 2017 at 14:15

Akbar Soft · Accepted Answer · 2017-12-11 18:31:31Z

1

use this, may this help you...

npm install axios

or

bower install axios

then

import axios from 'axios'


            var datas = new FormData()

            datas.append('postMessage', this.postMessages)
            datas.append('postPicture', this.postPicture)


axios.post('your_url_here', datas , {headers: {'Content-Type': 'multipart/form-data'}})
                .then((response) => {
                    //if success
                    console.log(response)
                  },
                  (response) => {
                   //if error occures 
                   console.log(response)
                  })

answered Dec 11, 2017 at 18:31

Akbar Soft

1,06610 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Getting null value in FormData in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related