将多张图片从 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[] = [];