[英]How to upload a file using formGroup in angular
我的 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 來做嗎?
這也是我的錯誤
它在 postman 中有效,但在我的前端無效。
如果請求正文包含文件,則必須將請求正文作為 formData 發送。
let objFormData = new FormData();
objFormData.append('producto', this.productoForm.get('producto')?.value)
...
objFormData.append('imagen', fileToUpload);
....
this._productoService.guardarProducto(objFormData).subscribe(data => {
...
如何在 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) => {
....
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.