Question

您好，我尝试在angular 8和laravel API中一次上传多个文件。我可以使用此代码存储单个图像。角度代码：

    <input type="file" name="image" (change)="uploadImage($event)">

    uploadImage(event) {
    console.log(event);
    this.img = <File>event.target.files[0];
    }

    const formdata = new FormData();
    formdata.append('image', this.img, this.img.name);

Laravel代码：这就是我将图像移动到文件夹然后将名称存储到数据库中的方式。

    $img = $request->file('image');
    $image = str_random(10).time().'.'.$img->getClientOriginalExtension();
    $destination = 'assets/images/';
    $img->move($destination, $image);

如何一次对多个文件执行此操作？

Answer 1

这是示例代码：

在HTML中：

<input type="file" (change)="upload($event)" multiple/>

在ts

    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);
          }

Answer 2

我认为文件上传在角度上是一个弱点，但是可以通过将输入值存储为FileList object来完成。 FileList是不可迭代的，因此，如果需要验证，可以将其转换为File []即。 Array.from（）;

只需使用正常的http请求发送对象/数组

Answer 3

您可以使用<input type="file" name="image" (change)="uploadImage($event)" multiple>在输入字段中获取多个文件。在laravel控制器中，请确保对每个文件进行迭代。

Answer 4

最后，我在Angular和Laravel Controller中通过循环使它工作 Idk，如果这是一个正确的解决方案，但是我会将其发布为答案，以便其他人可以从中受益，以下是我的代码。 HTML

    <input type="file" required name="images" (change)="uploads($event)" multiple>

Typescript函数发生更改

    uploads(event) {
        console.log(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）函数将此数组保存到数据库中。

如何使用Laravel API以角度上传多个图像/文件？

4 个答案: