У меня есть массив файлов, загружаемых интерфейсом Vue. Я пытаюсь проверить их, прежде чем они будут загружены, и если они не пройдут валидатор, верните ошибку как json для внешнего интерфейса. Однако даже когда я загружаю правильное изображение, я получаю ошибку The image field is required
. Когда я проверял сетевой запрос в Chrome, заголовки показывают file[]: binary
, а когда я нажимаю «просмотреть источник» под заголовками, он показывает:
------WebKitFormBoundaryu3sdahHmJlPW
Content-Disposition: form-data; name="file[]"; filename="logo.png"
Content-Type: image/png
. Я не уверен, что я делаю неправильно.
* Контроллер *
public function uploader(Request $request)
{
$validator = \Validator::make($request->all(), [
'image' => 'required',
'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($validator->fails()) {
return response()->json([
'status' => 0,
'message' => $validator->messages(),
]);
}
if ($request->hasFile('file')) {
$files = $request->file('file');
$stack = [];
foreach ($files as $file) {
$fileName = Storage::put('/bucket', file_get_contents($file->getRealPath()), ['visibility' => 'public']);
array_push($stack, $fileName);
}
return response()->json($stack);
}
}
* Vue *
uploadImages: function() {
if (!this.files) {
return;
}
let formData = new FormData();
this.files.forEach((x,index) => {
formData.append("file[]", x)
});
axios.post('/uploader', formData, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
.then(response => {
///
})
}