Estoy usando ngx-file-upload para cargar imágenes y enviarlas como base64 con mi valor de formulario. funciona para una imagen, pero ¿cómo puedo hacer que funcione para varias imágenes?
.ts
send() { // if (this.createEstimation.valid) { let value = this.createEstimation.value; const selectedFile = <File>value.files; const file = selectedFile[0]; const fileName = file.name; const fileExtension = file.name.split('.').pop().toLowerCase(); const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const image = reader.result as any; var strImage = image.split("base64,")[1].substring(4); //final data this.finalData = { client: { firstName: value.firstName.split(' ').slice(0, -1).join(' '), lastName: value.firstName.split(' ').slice(-1).join(' '), }, images: [ { fileName: fileName, content: strImage } ], } console.log(this.finalData); } } }Voy a suponer que selectedFile es en realidad una colección de archivos. Podríamos recorrer los archivos, enviar blobs de archivos a una matriz de archivos y agregarlos a finalData . Repase el código, agregue verificación de tipo y refactorice donde sea necesario.
send() { // if (this.createEstimation.valid) { let value = this.createEstimation.value; const selectedFiles = <File>value.files; const files = selectedFiles; let imageArray = []; for (let file of selectedFiles) { let fileName = file.name; let fileExtension = file.name.split('.').pop().toLowerCase(); let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { let image = reader.result as any; let strImage = image.split('base64,')[1].substring(4); imageArray.push({fileName: fileName, content: strImage}); }; this.finalData = { client: { firstName: value.firstName.split(' ').slice(0, -1).join(' '), lastName: value.firstName.split(' ').slice(-1).join(' ') }, images: imageArray }; console.log(this.finalData); } } }