Actualmente estoy creando una aplicación de chat en tiempo real. Esta es una aplicación web que usa node.js para el backend y usa socket.io para conectarse de un lado a otro.
Actualmente, estoy trabajando en la creación de perfiles de usuario con imágenes de perfil. Estas imágenes de perfil se almacenarán en una carpeta llamada images/profiles/ . El archivo será nombrado por la id del usuario. Por ejemplo: el usuario con el id 1 tendrá sus fotos de perfil almacenadas en images/profiles/1.png . Muy autoexplicativo.
Cuando el usuario envía el formulario para cambiar su imagen de perfil, el navegador JavaScript obtendrá la imagen y la enviará al servidor:
form.addEventListener('submit', handleForm) function handleForm(event) { event.preventDefault(); // stop page from reloading let profilePicture; // set variable for profile picture let profilePictureInput = document.getElementById('profilePictureInput'); // get image input const files = profilePictureInput.files[0]; // get input's files if (files) { const fileReader = new FileReader(); // initialize file reader fileReader.readAsDataURL(files); fileReader.onload = function () { profilePicture = this.result; // put result into variable socket.emit("request-name", { profilePicture: profilePicture, id: userID, }); // send result, along with user id, to server } } He comentado la mayor parte del código para que sea fácil de seguir. El servidor luego obtiene esta información. Con esta información, se supone que el servidor debe convertir la imagen enviada a un formato png (puedo hacer cualquier formato, pero tiene que ser el mismo formato para todas las imágenes). Actualmente estoy usando la biblioteca jimp para realizar esta tarea, pero parece que no funciona.
const jimp = require('jimp'); // initialize Jimp socket.on('request-name', (data) => { // when request has been received // read the buffer from image (I'm not 100% sure what Buffer.from() does, but I saw this online) jimp.read(Buffer.from(data.profilePicture), function (error, image) { if (error) throw error; // throw error if there is one image.write(`images/profiles/${data.id}.png`); // write image to designated place } });El error que obtengo:
Error: Could not find MIME for Buffer <null> Busqué respuestas en Internet, pero no pude encontrar ninguna. Estoy disponible para usar otra biblioteca si esto ayuda. También puedo cambiar el formato del archivo ( .png a .jpg o .jpeg , si es necesario; solo debe ser coherente con todos los archivos). Lo único que no puedo cambiar es el uso de JavaScript/ Node.js y socket.io para enviar la información al servidor.
Gracias de antemano. Cualquier y toda ayuda es apreciada.
Si solo está obteniendo el URI de datos como una cadena, entonces puede construir un búfer con él y luego usar el fs integrado para escribir el archivo. Asegúrese de que la ruta relativa sea precisa.
socket.on('request-name', data => { const imgBuffer = Buffer.from(data.profilePicture, 'base64'); fs.writeFile(`images/profiles/${data.id}.png`, imgBuffer); }