多文件上传 Angular + Laravel

Question

我正在使用Angular，需要通过一个由Laravel创建/编写的API上传多个图像。该API接受以下请求体：

portfolio_id: 2
portfolio_image: [ {file1}, {file2} ] //Accepts in this format. File Objects in an array

我的Angular代码如下：

HTML

 <div class="col-lg-12">
  <label class="file-upload-label">Upload Profile Picture</label>
  <input multiple (change)="fileSelected($event)" type="file" id="file" name="profile_pic"/>
  <label for="file" class="btn-2">Upload</label>
 </div>

Component.ts

  selectedFile;

  fileSelected(event) {
    console.log(event);
    this.selectedFile = <File>event.target.files;
    console.log("Selected Files are:",this.selectedFile)
  }

在点击提交按钮后，我从 component.ts 文件执行以下函数：

  portfolioImage(){

  const formData =  new  FormData();
  formData.append("portfolio_id",  this.portfolioId);
  formData.append("portfolio_image", this.selectedFile)
  this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res =>  {
      console.log(res);
      alert('Files uploaded Successfully!');
  })
}

控制台输出: 当文件选择发生变化事件时，我在console.log中看到以下内容

FileList [ File, File ]

在扩展数组时，我看到了以下内容：

 FileList(2)
    0: File { name: "1.jpg", lastModified: 1578490559152, size: 317383, … }
    1: File { name: "2.jpg", lastModified: 1578490599778, size: 288174, … }
    length: 2

问题： 提交后，在网络选项卡中未看到任何参数，尽管我收到了“成功上传图像”的消息。

尝试过的事情： 我尝试通过循环上传，并将fileSelected（event）函数更改为：

 myFiles:string [] = [];
  fileSelected(event) {
    for (var i = 0; i < event.target.files.length; i++) { 
        this.myFiles.push(event.target.files[i]);
    }
}

并上传功能至：

portfolioImage(){
  console.log("myfile",this.myFiles);
  const formData =  new  FormData();
  formData.append("portfolio_id",  this.portfolioId);
  for(var i =  0; i <  this.myFiles.length; i++)  {  
      formData.append("portfolio_image",  this.myFiles[i]);
  } 
  this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res =>  {
      console.log(res);
      alert('Files uploaded Successfully!');
  })
}

但仍然没有运气。

摘要：如何使用Angular在前端和Laravel API在后端上传多个文件。 Laravel API将文件作为数组中的对象接受：[ {file}, {file} ]。任何帮助都将不胜感激。谢谢。

- String name

Answer 1

你的上传函数中有一个小错误，请考虑以下内容：

portfolioImage(){
  const formData =  new  FormData();
  formData.append("portfolio_id",  this.portfolioId);
  for(var i =  0; i <  this.myFiles.length; i++)  {  
      formData.append("portfolio_image[]",  this.myFiles[i]);
  } 
  this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res =>  {
      console.log(res);
      alert('Files uploaded Successfully!');
  })
}

portfolio_image 应该按照给定的方式使用，将其作为 formData 中的多文件数组。从您的 Laravel 控制器函数中，按照给定的方式使用以检查已上传的临时文件。

public function uploader(Request $request){
    $data = [
        $request->allFiles(),
    ];
    return response()->json($data);
}

- Kiran Maniya