Vue-Laravel file formdata always empty-CodePudding

I'm trying to upload a file to a laravel backend via axios.

When a user clicks on the file input I get the file object, append it to the formData object post it to the backend, but for some reason, when I try to get the file on the backend I get an empty array.

here is my code:

<template>
<div>
    <input type="file" @change="uploadFile" ref="file">
    <button @click="submitFile">Upload!</button>
</div>

  uploadFile(){

      
        this.Images = this.$refs.file.files[0];

        const formData = new FormData();
        formData.append('file', this.Images);
        const headers = { 'Content-Type': 'multipart/form-data' };
        axios.post(this.baseUrl 'test-file-uploads', formData, { headers }).then((res) => {
        res.data.files; // binary representation of the file
        res.status; // HTTP status
        });

  }


public function testUploads(Request $request){    
   

    return [$request->file('file')];

   return  $this->uploadFiles($request,108,'props_and_set');
  
}

CodePudding user response：

Use $request->hasFile('file') to see if the backend is able to get the file from the front end and then call the storage methods on the file.