Laravel 和 Angular 从请求中获取图像答案

【问题标题】：Laravel & angular Get image from RequestLaravel 和 Angular 从请求中获取图像
【发布时间】：2020-12-11 16:22:00
【问题描述】：

我有一个包含许多字段的角度表单，其中一个字段是图像。当我将此数据作为对象请求发送到后端（laravel）时，给我错误 500，因为找不到图像（文件）。

我在没有任何数据的情况下尝试了它，只是使用此代码的图像（文件）：

public function insertFile(Request $request){
        $file = $request->file('file');
        $originalImage = $file->getClientOriginalName();
        $path = $file->move(public_path('images'), $originalImage);
   }

现在我正在尝试从 CompanyDetails 对象中获取图像（文件）现场图片

TypeScript 对象

export class CompanyDetails {
      user_id?:any;
      companyName: string;
      managerName: string;
      image?: any;
    }

在对象中分配数据后这是我的对象

private buildForm(){
    this.detailsModel.companyName = this.myForm.companyDetails.value.companyName;
    this.detailsModel.managerName = this.myForm.companyDetails.value.managerName;
    const formData = new FormData();
    formData.append('file' , this.selectedFile,this.selectedFile.name);
    this.detailsModel.image = formData;
}

这是我的 php (laravel) 代码

public function insertDetails(Request $request){
        $data = $request->input();
        $managerName= $data['managerName'];
        $description= $data['description'];
        //get image from request
        $image= $data['image'];
        $file = $image->hasFile('file');
        $originalImage = $file->getClientOriginalName();
        $imagePath = 'public/uploads/'.$originalImage;
        $imageName = $originalImage;
        $file->move(public_path('images'), $originalImage)
}

【问题讨论】：

标签： php angular laravel file-upload

【解决方案1】：

我正在使用响应式表单。正如您在此处看到的，我在将其发送到后端之前使用了 toFormData() 方法。

我不知道它是否对你有帮助，但请告诉我。

export class ContactFormularComponent implements OnInit {

  contactForm: FormGroup;

  mailAddresses = environment.contactMailAddresses;

  constructor(
    private contactService: ContactService, 
    private _snackBar: MatSnackBar) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.contactForm = new FormGroup({
      email: new FormControl(null, [Validators.required, Validators.email]),
      name: new FormControl(null),
      subject: new FormControl(null),
      message: new FormControl(null),
      attachement: new FormControl(null),
      receiver: new FormControl(null, [Validators.required])
    });
  }

  send() {
    if (this.contactForm.valid) {
      
      var data = toFormData(this.contactForm.value);
      this.contactService.sendMail(data).subscribe((response) => {
        this._snackBar.open(response['message'], 'Ok', {
          duration: 5000,
          panelClass: 'snackbar-success'
        });
      },
      (response)=>{
        this._snackBar.open(response['message'], 'Ok', {
          duration: 5000,
          panelClass: 'snackbar-success'
        });
      });
      this.initForm();
    }
  }
}

export function toFormData<T>( formValue: T ) {
  const formData = new FormData();
  for ( const key of Object.keys(formValue) ) {
    const value = formValue[key];
    formData.append(key, value);
  }
  return formData;
}

【讨论】：