angular中如何使用formGroup上传文件

Question

我的 api 工作正常，它上传、编辑和删除图像，但我的前端不起作用，当我尝试上传图像时它显示错误，这是我的代码：

export class CrearProductoComponent implements OnInit {

  productoForm: FormGroup;
  titulo = 'Crear Produto';
  id: string | null;
  uploadedFiles!: File;
  imagen_Form!: any;

  constructor(private fb: FormBuilder, 
              private router: Router, 
              private toastr: ToastrService, 
              private _productoService: ProductoService,
              private aRouter: ActivatedRoute) { 
     this.productoForm = this.fb.group({
       producto: ['', Validators.required],
       categoria: ['', Validators.required],
       ubicacion: ['', Validators.required],
       precio: ['', Validators.required],
       imagen: ['']
     })
     this.id = this.aRouter.snapshot.paramMap.get('id');
  }

  ngOnInit(): void {
    this.esEditar();
  }

  onFileChange(e: any) {
    /*
    const formData = new FormData();
    this.uploadedFiles = e.target.files
    const file = e.target.files
    */
    if (e.target.files.length > 0) {
      const file = e.target.files[0];
      this.uploadedFiles = file;
    }
    /*
    formData.append('imagen', file);
    this.productoForm.patchValue({ imagen: formData });
    this.productoForm.updateValueAndValidity();
    */

  }

  agregarProducto(){
    console.log(this.productoForm);
    console.log(this.productoForm.get('producto')?.value);

    const PRODUCTO: Producto = {
      nombre: this.productoForm.get('producto')?.value,
      categoria: this.productoForm.get('categoria')?.value,
      ubicacion: this.productoForm.get('ubicacion')?.value,
      precio: this.productoForm.get('precio')?.value,
      imagen: this.uploadedFiles
    };

    if(this.id !== null){
      this._productoService.actualizarProducto(PRODUCTO, this.id).subscribe(data => {
        this.toastr.success('Producto actualizado', 'Producto actualizado');
        this.router.navigate(['/']);
      }, error => {
        console.log(error);
      })
    } else {
      console.log(PRODUCTO);
      this._productoService.guardarProducto(PRODUCTO).subscribe(data => {
        this.toastr.success('El producto fue registrado con exito!', 'Producto Registrado');
        this.router.navigate(['/']);
      }, error => {
        console.log(error);
        this.productoForm.reset();
      })
    }
  }

  esEditar(){
      if(this.id !== null){
        this.titulo = 'Editar Producto';
        this._productoService.obtenerProducto(this.id).subscribe(data => {
          this.productoForm.setValue({
            producto: data.nombre,
            categoria: data.categoria,
            ubicacion: data.ubicacion,
            precio: data.precio
          })
        })
      }
  }

}

我已经访问了很多页面，但仍然没有得到答案或指南，我可以用 formData 来做，但是有什么方法可以用 class model 和 formGroup 来做吗？

这也是我的错误

错误

错误 2

它在 postman 中有效，但在我的前端无效。

Answer 1

如果请求正文包含文件，则必须将请求正文作为 formData 发送。

let objFormData = new FormData();
objFormData.append('producto', this.productoForm.get('producto')?.value)
...
objFormData.append('imagen', fileToUpload);
....
this._productoService.guardarProducto(objFormData).subscribe(data => {
...

Answer 2

如何在 angular 中使用 formGroup 上传文件 ==>

绝对需要通过formdata传递选定的文件并且需要使用直接的httpclient

import { HttpClient } from '@angular/common/http';


constructor(public http: HttpClient) { }

upload(event:any){
   const formData = new FormData();
   formData.append("image", event.files[0]);
   this.http.post("api", formData).subscribe((res: any) => {
      ....
   })
}