Actualmente, estoy creando una aplicación web que usa Node.js y express para mi aplicación del lado del servidor. Soy bastante nuevo en las aplicaciones cliente-servidor y no estoy seguro de cómo enviar una imagen desde el sitio web de mi cliente a mi servidor express. Quiero procesar la imagen una vez que llegue al servidor, pero no quiero almacenar el archivo en el servidor. Tengo un file <input> en mi index.html que quiero usar para que el cliente seleccione su imagen, pero no sé cómo pasar esto al servidor para que lo use para una variable dentro de un script separado que procesa la imagen y envía al cliente un cálculo resultante. ¡Cualquier consejo sobre cómo seguir adelante es muy apreciado!
Voy a explicarlo con un ejemplo. Supongamos que quiero enviar una imagen para una universidad que quiero agregar en una base de datos en alguna parte. En mi formulario tendría:
<form action="" class='add-item-form'> <input id='image-file' type='file'/> <input type="submit" id="submitFormBtn"/> </form>Ahora, la idea es crear un controlador que se active cuando se hace clic en submitFormBtn, usando react, o vue, o javascript angular o simple. Aquí hay un ejemplo de cómo podría verse el controlador:
function onSubmit() { let input = document.querySelector("#image-file") as HTMLInputElement; if(!!input.files){ // files is an array but e assume we only added one image const file = input.files[0]; let reader = new FileReader(); // the reader triggers the functions whenever it's been loaded reader.onload = function () { // reader.results contains the binary string // btoa converts the binary string into base64 //to ease data transportation through the wire let base64_data = window.btoa(reader.result); // service that makes the post request to the server // implementations vary, I'd use axios library though TeacherService.addUniversity(base64_data) .then(res => { // do something is it was a success }).catch(err => { // do something is it there was an error }).finally(()=>{ // do someting either way }); } reader.readAsBinaryString(file); } }Ahora, la pelota está en el servidor, solo necesita recibir el json como siempre y decodificar los datos base64 que provienen del cliente, hay muchas bibliotecas para hacer eso dependiendo del idioma de su servidor. Una vez decodificado, guarda el archivo con el nombre de archivo apropiado con su extensión de archivo, y eso es básicamente todo, desde allí tendrá el archivo original en su servidor y podrá realizar cualquier otro procesamiento con él.