Как загрузить несколько изображений/файлов в angular с помощью laravel api?
Привет, я пытаюсь загрузить несколько файлов одновременно в angular 8 и laravel api. Я могу сохранить одно изображение, используя этот код. Угловой код:
<input type = "file" name = "image" (change) = "uploadImage($event)">
uploadImage(event) {
console.info(event);
this.img = <File>event.target.files[0];
}
const formdata = new FormData();
formdata.append('image', this.img, this.img.name);
Ларавель код: вот как я перемещаю изображение в папку, а затем сохраняю имя в базе данных..
$img = $request->file('image');
$image = str_random(10).time().'.'.$img->getClientOriginalExtension();
$destination = 'assets/images/';
$img->move($destination, $image);
Как я могу сделать это для нескольких файлов одновременно?
Ответы 4
Я думаю, что загрузка файла является слабым местом в angular, но это можно сделать, сохранив входное значение как Объект FileList. FileList не является итерируемым, поэтому, если вам нужно проверить, вы можете преобразовать его в File[], т.е. Массив.из();
Просто отправьте объект/массив с обычным http-запросом
Вы можете использовать <input type = "file" name = "image" (change) = "uploadImage($event)" multiple>, чтобы взять более одного файла в поле ввода. В контроллере laravel обязательно выполните итерацию для каждого файла.
Вот пример кода:
В HTML:
<input type = "file" (change) = "upload($event)" multiple/>
В ц
upload(event){
const fileList: FileList = event.target.files;
for (let x = 0; x < fileList.length; x++) {
formData.append("someFile", fileList[x], fileList[x].name);
}
this.uploadFiles(formData).subscribe();
}
uploadFiles(formData: any): Observable<any> {
const req = new HttpRequest('POST', 'api/uploads', formData, {
reportProgress: true,
headers: new HttpHeaders()
.append('enctype', 'multipart/form-data')
});
return this.http
.request(req);
}
Наконец, я заставил его работать с помощью циклов в Angular, а также в Laravel Controller. Не знаю, если это правильное решение, но я опубликую это как ответ, так что, возможно, это принесет пользу другим, ниже приведен мой код. HTML
<input type = "file" required name = "images" (change) = "uploads($event)" multiple>
Функция машинописного текста при изменении
uploads(event) {
console.info(event);
this.docs = <File>event.target.files;
this.length = <File>event.target.files.length;
}
получить данные формы
const formdata = new FormData;
for (let i = 0; i < this.length; i++) {
formdata.append('docs'+[i], this.docs[i], this.docs[i].name );
formdata.append('length', this.length
}
Затем отправьте данные этой формы через API... а затем в Laravel Controller я использовал еще один цикл, чтобы переместить каждое изображение в папку и задать случайное имя, а затем добавить это имя в массив.
$length = $request->length;
for ($i=0; $i < $length; $i++) {
$img[$i] = $request->file('images'.$i);
$image = str_random(10).time().'.'.$img[$i]->getClientOriginalExtension();
$destination = 'assets/images/';
$img[$i]->move($destination, $image);
$images[] = $image;
}
Затем сохраните этот массив в базу данных с помощью функции json_encode($images).