Tengo un cuadro de carga de imágenes. Cosas estándar:
<input id="image-upload-input" type="file" />Una vez que el usuario elige un archivo, puedo acceder al contenido y enviarlo a mi API a través de Axios de la siguiente manera:
const imageUploadInput = document.getElementById("image-upload-input"); const file = imageUploadInput.files[0]; if (!file) { return; } const reader = new FileReader(); const component = this; reader.onload = function (event) { axios.post("upload/image", Buffer.from(event.target.result)); }; reader.readAsArrayBuffer(file);Sin embargo, tengo algunas restricciones con respecto a las dimensiones y me gustaría verificarlas en el lado del cliente.
Estoy bastante seguro de que se puede hacer. Todavía no lo he probado, pero me imagino que si solo coloco los datos en una etiqueta img (idealmente invisible) con un atributo src de datos, eso podría funcionar. ¿Alguien tiene algún código de trabajo? ¿O una mejor manera de hacerlo?
agregar algo como esto debería funcionar
imageUploadInput.onchange = function (event) { const file = imageUploadInput.files[0]; if (!file) { return; } const image = new Image(); image.onload = function() { console.log(this.width, this.height); } image.src = URL.createObjectURL(file); };