Vue.js前端多图上传至Laravel后端无法识别为文件报错如何解决？

• File类型对象无法通过JSON.stringify()序列化，你把文件数组序列化成字符串后，后端解码得到的只是包含文件元信息的普通对象转成的stdClass，根本不是Laravel能识别的UploadedFile实例，自然调用不了上传文件相关的方法。
• 多文件通过FormData传输时，需要对字段名添加[]后缀，并且逐个追加文件到FormData中，不能直接传入整个数组或者序列化后的字符串。

前端Vue代码修改 #

let payload = new FormData();
// 遍历文件数组，逐个追加到FormData，字段名加[]标识为数组类型
this.image_data.forEach(item => {
  payload.append("all_images[]", item.file);
});
// 其他表单字段正常append即可，大部分请求库传入FormData时会自动配置multipart/form-data请求头，无需手动修改

后端Laravel代码修改 #

直接通过请求的file()方法获取上传的文件数组，无需json_decode：

foreach (request()->file('all_images') as $key => $file) {
    // 此时$file是Illuminate\Http\UploadedFile实例，可以正常调用上传文件相关方法
    dd($file->getClientOriginalName());
    // 后续存储逻辑直接操作$file即可
}

额外注意事项 #

• 前端的文件选择input必须添加multiple属性才能支持多选文件
• 注意调整php.ini的upload_max_filesize、post_max_size、max_file_uploads配置，避免文件大小或数量超出限制导致上传失败
• 建议添加文件校验规则，确保上传内容符合要求：

$validated = request()->validate([
    'all_images.*' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'
]);

内容的提问来源于stack exchange，提问作者Dipo Deen