使用 Angular 7 将图像文件与其他表单数据一起提交到服务器

Question

我有提交车辆详细信息的表格，包括 VIN、司机和车辆照片。我的问题是将表单数据详细信息与图像一起提交到使用 laravel 作为后端的服务器

uploadImage (e) {     

for (let i = 0; i < e.target.files.length; i++)
       {
  this.selectedFile = <File>e.target.files[i];

       }

  }

onSubmit(){  //this method is called when user submits data

const fd = new FormData();
     fd.append('file', this.selectedFile, this.selectedFile.name);
         this.http.post('http://localhost:8000/api/buses',
         {fd, 'formdata':this.form}).subscribe((data)=>console.log(data))
}

//this is the code receiving the image
 if($request->has('file')) {

    // Get filename with the extension
    $filenameWithExt = $request->file('file')->getClientOriginalName();
    // Get just filename
    $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
    // Get just ext
    $extension = $request->file('file')->getClientOriginalExtension();
    // Filename to store
    $fileNameToStore = $filename . '_' . time() . '.' . $extension;
    // Upload Image
    $path = $request->file('file')->storeAs('public/cover_images', $fileNameToStore);

echo json_encode($fileNameToStore);

}

将图像和其他表单数据提交到我的后端服务器

Answer 1

您发布的信息有误。请按如下方式更改。

fd.append('file', this.selectedFile, this.selectedFile.name);
         this.http.post('http://localhost:8000/api/buses',
         fd).subscribe((data)=>console.log(data))