时间戳

首页 > 解决方案 > 无法从 vue 读取 Laravel 控制器中的文件列表对象

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

问题描述

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

在 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 
        }
    }
}

标签： laravelvue.jsform-data

解决方案

您的代码有几个问题。

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

v-on:change="onImageChange"

请注意：

  • 小写v为v-on
  • 单人:

或者，您可以编写@change="onImageChange".

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

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

推荐阅读