无法从 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;
});
},

我的拉拉维尔控制器

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返回一个FileList而不是单个文件，因此您需要将onImageChange代码更改为以下内容才能获取文件本身：

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