Estoy trabajando en un problema en el que tengo que tomar tres imágenes como entrada del usuario y enviarlas al backend convirtiéndolas a Base64. Sé cómo hacerlo para un solo archivo de entrada, pero no puedo trabajar con múltiples entradas.
Quiero tener una sola función que pueda convertir las imágenes a Base64 y almacenar el valor de cada imagen en una variable separada. Por favor, me ayudas con ésto.
El siguiente es el código que estoy usando para una sola entrada, es decir, Primera imagen .
CÓDIGO HTML
<div class="first_div"> <label for="first_image">First Image</label> <input name="first_image" type="file" accept="image/*" id="first_image" class="img_file"> </div> <div class="second_div"> <label for="second_image">Second Image</label> <input name="second_image" type="file" accept="image/*" id="second_image" class="img_file"> </div> <div class="third_div"> <label for="third_image">Third Image</label> <input name="third_image" type="file" accept="image/*" id="third_image" class="img_file"> </div> <button onclick="submitImages()">Submit</button>CÓDIGO JAVASCRIPT
let encoded_image; function getBase64(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { console.log(reader.result); encoded_image = reader.result; }; reader.onerror = function (error) { console.log('Error: ', error); }; } const submitImages = () => { var files = document.getElementById('first_image').files[0]; if (files.length > 0) { getBase64(files[0]); } const formData = new URLSearchParams(new FormData()); formData.append("first_image", encoded_image); fetch(API CALL HERE) }Quiero crear una función que tome información de los tres campos, los convierta a Base64 y los almacene en una variable. Para que pueda agregarlo a los datos del formulario.
Seleccione todas las entradas, haga un bucle y obtenga base64 de cada archivo Pruebe esto
const getBase64 = (file) => new Promise((resolve, reject) => { console.log(file); const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = (err) => reject(err); }); const submitImages = async () => { const imageInputs = document.querySelectorAll("input"); const images = await Promise.all( [...imageInputs].map((imageInput) => imageInput?.files?.[0] ? getBase64(imageInput.files[0]) : null ) ); console.log(images); };