使用angular 7到服务器提交图像文件和其他表单数据

Question

I have form submitting details of a vehicle including VIN, driver and a photo of the vehicle. My problem is submitting the form data details together with the image to a server am using laravel as my backend

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);

}

To submit the image and the other formdata to my backend server

Answer 1

You are posting the wrong information. Please change this as follows.

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