david001's avatar

FormData is null

Hi, I need help in image upload with vuejs and Laravel. I am using this package to upload image https://github.com/lekhang2512/vue-upload-multiple-image

<template>
<div>

    <vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      @data-change="dataChange"
      ></vue-upload-multiple-image>
</div>
</template>

methods:{
        
       
    uploadImageSuccess(formData, index, fileList) {
        //console.log('data', formData, index, fileList)
    

axios.post('/images',fileList,{headers: {
        'Content-Type': 'multipart/form-data' }
         }).then(response => {
            console.log(response);
    })},
    beforeRemove (index, done, fileList) {
      console.log('index', index, fileList)
      var r = confirm("remove image")
      if (r == true) {
        done()
      } else {
      }
    },
    editImage (formData, index, fileList) {
      console.log('edit data', formData, index, fileList)
    },
    dataChange (data) {
      console.log(data)
    }

controller:

public function Images(Request $request){
       return($request->formData);
	
     
    }

I want to get filename and save in file in public directory and image in db But I am getting null form data.

0 likes
1 reply
bobbybouwmann's avatar

formData is just the variable name in your frontend. To get the actual content you need to get the name of the input form.

If you do dd($request->all()) you can see all the data that has been posted to the controller. From there you can get the key and do $request->input($key) or $request->file($key) to specifically get a file.

1 like

Please or to participate in this conversation.