Estaba tratando de cargar una imagen usando Angular en un cubo de almacenamiento de Google. Y todo funciona bien con Postman. Pero estoy atascado con mecanografiado angular. ¿Alguien puede sugerirme una manera de hacer esto?
archivo .html
<input type="file" accept="image/png, image/jpeg" class="form-control upload-btn" formControlName="imageUpload" placeholder="Upload Images" (change)="uploadImage($event)" required>archivo .ts
uploadImage(event: any) { if (event.target.files && event.target.files[0]) { const uploadImage=event.target.files[0]; const fileObject = { userId: this.userId, bucketName: 'Test123', image: uploadImage }; this.userService.uploadImage(fileObject).subscribe(data=>{ },err=>{ console.log("error occured") } ) }}
archivo .servicio
uploadImage(fileObject: any){ return this.http.post('http://localhost:1337' + 'upload-image' , fileObject);}
No se produce ningún error en el lado del backend. Funcionó bien con Postman . No estoy seguro acerca del archivo .ts .
Como sugirió @PrasenjeetSymon, usar FormData ayudará a cargar imágenes en Angular.
Aquí está el hilo similar que demuestra cómo usar FormData
Puedes usar la etiqueta de HTML:
<input type="file" name="file" id="file" (change)="onFileChanged($event)" />y en el componente:
public files: any[]; contructor() { this.files = []; } onFileChanged(event: any) { this.files = event.target.files; } onUpload() { const formData = new FormData(); for (const file of this.files) { formData.append(name, file, file.name); } this.http.post('url', formData).subscribe(x => ....); }