Vue-Laravel 文件formdata总是空的

Question

我正在尝试通过 axios 将文件上传到 laravel 后端。

当用户点击文件输入时，我得到文件对象，将它附加到 formData 对象 post 它到后端，但由于某种原因，当我尝试在后端获取文件时我得到一个空数组。

这是我的代码：

<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');
  
}

Answer 1

使用$request->hasFile('file')查看后端是否能够从前端获取文件，然后调用文件的存储方法。

Vue-Laravel 文件formdata总是空的

Vue-Laravel file formdata always empty

php

vue.js

axios