0
419
VistasCargue el archivo en Angular a través de una API que acepta el archivo como blob y requiere datos de formulario de varias partes
Estoy creando un formulario en angular que se usa para cargar un archivo y tengo una API de terceros a la que debo llamar que acepta datos y archivos de formularios de varias partes como blob. ¿Puedes decirme cómo puedo hacer eso? Tengo este código por ahora?
HTML
<form [formGroup]="customerFileGroup" (submit)="submit($event)"> <div> <input formControlName="file" type="file" accept=".csv,text/plain, text/csv, text/html" (onSelection)="changeFile($event)" /> </div> <button>Submit</button </form>Mecanografiado
export class CustomerFile{ constructor(private readonly _fb: FormBuilder) {} const customerFileGroup: FormGroup = this._fb.group({ file: this._fb.control(null), }); submit(e: Event): void { e.preventDefault(); const formData = new FormData(); formData.append('file', this.fileUploadGroup.value); // this.customerFileService.uploadFile(formData.file?); What should I send here because the API requires file as blob now }Archivo/API
public uploadFile( file: Blob ) { // Black box for me }Pavonearse
Estoy tratando de entender qué necesito pasar en el servicio, por lo que son datos de formulario de varias partes, pero el cuerpo de la solicitud del archivo es un blob. Estoy usando Angular 10. Avísame si se requiere más información
Si paso los datos del formulario, me sale el siguiente error:
El argumento de tipo 'FormData' no se puede asignar al parámetro de tipo 'Blob'
1 Respuestas
Responde la pregunta0
No debe usar ngModel o formControl para obtener el archivo, debe almacenar el archivo en la variable manualmente cuando cambia el archivo, vea el ejemplo a continuación
<form [formGroup]="customerFileGroup" (submit)="submit($event)"> <div> <input formControlName="file" type="file" accept=".csv,text/plain, text/csv, text/html" (change)="changeFile($event)" <!-- Change event name to "change" --> /> </div> <button>Submit</button> </form> export class CustomerFile{ ... fileToUpload: FileList; changeFile(evt) { this.fileToUpload = evt.target.files[0]; } submit(e: Event): void { e.preventDefault(); const formData = new FormData(); formData.append('file', this.fileToUpload); this.customerFileService.uploadFile(formData); } } export class CustomerFileService { ... public uploadFile(payload: FormData) { return this.http.post('<API_URL>',payload); } }