將多張圖片從 Angular 上傳到 Laravel

Question

我無法使用 Laravel api 從 **angular ** 上傳多個圖像，當我嘗試從 Postman 上傳這些圖像時它可以工作，但是當我從前端執行它時它失敗了。

我需要幫助，任何想法！

這是我的 api function：

public function storeImages(Request $request) 
{           
    if($request->hasFile('images')) {
        $data = [];
                    
        foreach($request->file('images') as $image)
        {
            $Imagename = $image->getClientOriginalName();
            $image->move(public_path('/images'), $Imagename);   
            $data[] = $Imagename;                            
        }
         
        $file = new ImageAnnonce($request->input()) ;
        $file->annonceId = $request->annonceId;
        $file->image_name = json_encode($data);
        $file->save();

        return response()->json($data); 
    }
    else {
        return response()->json(['message' => 'failed']);  
    }
} 

這是 html

<form (ngSubmit)="saveMultipleImage()">
  <input
    class="form-control"
    type="file"
    id="images"
    name="images[]"
    (change)="onSelectFile($event)"
    multiple
  />
  <button type="submit" class="btn btn-primary float-right" id="publier-btn">
    submite
  </button>
</form>
                    

文件.ts

saveMultipleImage(){   
    const headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

   var formdata = new FormData();
   //formdata.append('annonceId', '2' );
   for (let i = 0; i < this.length; i++) 
   {
       formdata.append('images', this.docs[i].name );
       //console.log('name -->', this.docs[i].name );
   }

   this.http.post('http://127.0.0.1:8000/api/storeImages', formdata,{headers: headers}).subscribe(res =>  {
       console.log(res);
   });
}

      docs:any;
      length:any;

      onSelectFile(event)
      { 
        this.docs = <File>event.target.files;
        this.length = <File>event.target.files.length;
      }

它總是返回

{message: "failed"}

Answer 1

您可以嘗試刪除 headers.append('Content-Type', 'multipart/form-data'); 來自您的 header？ 此外，您的控制台日志是否為您提供了正確的日志？

最后，docs 變量的數據類型是什么？ 嘗試將其設為 File 類型

docs: File[] = [];