I have an array of files being uploaded by the Vue frontend. I am trying to validate them before they are uploaded and if they failed the Validator, return the error as json for the frontend. However, even when I upload a valid image, I get the error The image field is required
. When I checked the network request in Chrome, the Headers show file[]: binary
and when I click 'view source' under the headers, it shows:
------WebKitFormBoundaryu3sdahHmJlPW
Content-Disposition: form-data; name="file[]"; filename="logo.png"
Content-Type: image/png
. I am not sure what I am doing wrong.
* Controller *
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 => {
///
})
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire