多个文件上传 Angular + Laravel

Question

我正在使用 Angular。 我必须通过 API（用 Laravel 制作/编写）上传多张图片。 以下正文被 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>

组件.ts

  selectedFile;

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

在按钮提交上，我正在从 component.ts 文件中运行以下 function：

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

控制台 Output：在文件选择更改事件中我在 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) function 更改为：

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

并将 function 上传到：

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} ]。 任何帮助将不胜感激。 谢谢你。

Answer 1

您在上传 function 时犯了一个小错误，考虑给定

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 controller function 中，按照给定的方式使用以检查上传的临时文件。

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