如何使用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来完成它，但是有什么方法可以用类模型和formGroup来完成吗？

这也是我的错误

错误

误差2

它在邮递员中起作用，但在我的前端就不行了。

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

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

当然，您需要通过格式数据传递选定的文件，并且需要使用直接的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) => {
      ....
   })
}