无法从 vue 读取 Laravel 控制器中的文件列表对象

Question

我正在创建一个应用程序，用户可以在其中填写可以发送多个文件的表格

在 vue.js 中，我正在创建包含文件数组和包含其余输入字段的对象的 formData。我正在用 Axios 发布它。在 Laravel 控制器的请求中，我无法访问我的文件列表对象。我可以看到

$request->My_Array,

但我可以读取里面的数据存储我也尝试过使用循环我也尝试过：

$request->all();
$request->file('files');

我的输入

<input class="browse" V-on::change="onImageChange" type="file">

我的vue.js组件

onImageChange(event) {
    this.files.push(event.target.files);
},
submit(e) {
    e.preventDefault();
    let currentObj = this;
    const fd = new FormData();
    for (let i = 0; i < this.files.length; i++) {
        fd.append('IoFiles[]', this.files[i]);
    }
    console.log(this.files);

    fd.append('IoFiles', this.files);
    fd.append('fields', JSON.stringify(this.fields));
    axios.post('/io',
        fd,
        {headers: {'Content-Type': 'multipart/form-data'}})
        .then(function (response) {
            currentObj.output = response.data;
        })
        .catch(function (error) {
            currentObj.output = error;
        });
},

我的Laravel控制器

public function store(Request $request)
{
    if ($request->IoFiles) {

        $medias = $request->IoFiles;

        foreach ($medias as $image) {
            return $image->getClientOriginalName();//That give me an  error 
        }
    }
}

Answer 1

您的代码有几个问题。

首先，V-on::change="onImageChange"应该是：

v-on:change="onImageChange"

请注意：

v-on

v

单身:

或者，您可以写成 @change="onImageChange"。

其次，event.target.files returns FileList 不是单个文件，因此您需要将 onImageChange 代码更改为以下代码才能获取文件本身：

onImageChange(event) {
    this.files.push(event.target.files[0]); //Note the [0] after files
},

无法从 vue 读取 Laravel 控制器中的文件列表对象

Unable to read filelist object in Laravel controller from vue

form-data

laravel

vue.js