He usado ngx-image-cropper en mi proyecto Angular para recortar imágenes antes de cargarlas. Algunas partes relacionadas de component.ts son:
croppedImage: any = ''; imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; } Base64ToFile(url: any, filename: any, mimeType: any){ return (fetch(url) .then(function(res){return res.arrayBuffer();}) .then(function(buf){return new File([buf], filename,{type:mimeType});}) ); } OnSubmit() { const filedata = new FormData(); this.Base64ToFile(this.croppedImage, "myphoto.png", "image/png").then(function(outputFile){ console.log(outputFile); filedata.append("file", outputFile, outputFile.name);//The first parameter "file" is the input parameter in API method }); this.http.post('https://localhost:5001/api/featuredpost/postimage/' + this.selectedPostId, filedata).subscribe( response => { console.log(response); } ); }acción API:
public async Task<IActionResult> PostImage([FromForm] IFormFile file, [FromRoute] int id){ ... } El problema es que cuando depuro mi API, el parámetro del file de entrada es nulo mientras que cropped image tiene un valor de cadena base64 . ¿Cómo puedo arreglarlo? Busqué preguntas relacionadas pero no encontré ninguna solución a mi caso. Una pregunta relacionada
this.http.post debe estar en un .then(...) de la this.Base64ToFile(..)
No está esperando que se complete la fetch async antes de la post de la API