Estoy utilizando multipart/form-data en el front-end y multer en el back-end para manejar la carga de imágenes en un sitio web que estoy construyendo.
Me encuentro con un problema en el que quiero que la imagen se muestre en la pantalla antes de enviar el formulario, pero no puedo porque el búfer no se genera hasta después de pasar por multer (creo)
Aquí está la carga útil de FormData ANTES de que se pase al backend
lastModified: 1608334888059 lastModifiedDate: Fri Dec 18 2020 18:41:28 GMT-0500 (Eastern Standard Time) {} name: "photomode_18122020_184125.png" size: 4776395 type: "image/png" webkitRelativePath: "" [[Prototype]]: FileAquí está la carga útil de FormData en el backend
buffer:Buffer(4776395) [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 10, 0, 0, 0, 4, 56, 8, 6, 0, 0, 0, 197, 66, 133, 69, 0, 0, 0, 19, 116, 69, 88, 116, 84, 105, 116, 108, 101, 0, 73, 109, 97, 103, 101, 83, 97, 118, 101, 114, 80, 78, 71, 215, 75, 83, 237, 0, 0, 0, 10, 116, 69, 88, 116, 85, 115, 101, 114, 68, 97, 116, 97, 0, 48, 56, 179, 7, 148, 0, 0, 32, 0, 73, 68, 65, 84, 120, 156, 76, 188, 89, 175, …] encoding:'7bit' fieldname:'files' mimetype:'image/png' originalname:'photomode_18122020_184125.png' size:4776395Código de interfaz
... html ... <form enctype="multipart/form-data"> <input type="file" :name="uploadFieldName" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length" accept="image/*" class="input-file"> </form> ... script tag now ... formData.append("photo", fieldName); for(let i =0; i < fileList.length; i++) { formData.append("files", fileList[i]); } // API call for photo // The form data at this point does not have the buffer for some reason :/ this.save(formData);Código de fondo
import multer from "multer" const upload = multer(); // This is where the buffer is available app.post("/photo", upload.any(), function(req, res, next) { photoService.create(req, res) })¿De dónde viene el búfer? ¿Y cómo puedo acceder al búfer antes de enviar la solicitud? Quiero permitir que mis usuarios obtengan una vista previa de la imagen en la pantalla antes de presionar enviar.
Podría usar una clase llamada FileReader , esto le permitirá obtener una vista previa de la imagen antes de cargarla en el backend y aquí hay un ejemplo
<div id="preview"></div> <input type="file" id="uploader"> $("#uploader").change(function() { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $("#preview").attr("src", e.target.result); }; reader.readAsDataURL(this.files[0]); } });