Para la optimización de SEO, intento reducir el tamaño de los archivos que el usuario intenta enviar (sé que podría tener alguna limitación de tamaño o algo que no lo haga debido a la UX). y lo estoy haciendo en el front-end porque quiero usar el método de URL prefirmado (AWS S3)
process(event: any, imageInputElement: any, maxWidth: number): any { return new Promise<any>((resolve, reject) => { try { const file = event.target.files[0] console.log('🚀 ~ file: index.vue ~ line 143 ~ process ~ file', file) const fileSize = file.size if (fileSize < 100000) return if (!file) return const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (event: any) { const src = event.target.result const canvas = document.createElement('canvas') as any const imgElement = document.createElement('img') as any imgElement.src = src imageInputElement.src = event.target?.result console.log(maxWidth) imageInputElement.onload = function (e: any) { const scaleSize = maxWidth / e.target.width canvas.width = maxWidth canvas.height = e.target.height * scaleSize const ctx = canvas.getContext('2d') ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height) const compressPer = (data: number) => { const result = 10000000 / data if (Math.trunc(result) >= 100) { return 100 } else if (Math.trunc(result) < 1) { return 1 } else { return Math.trunc(result) } } const srcEncoded = ctx.canvas.toDataURL( e.target, 'image/jpeg', compressPer(fileSize) ) const result = new File([srcEncoded], `${file.name}`, { type: 'image/jpeg', }) console.log( '🚀 ~ file: index.vue ~ line 186 ~ process ~ result', result ) resolve(result) } } } catch (error: any) { reject(error) } }) },Esta función se llama cada vez que el usuario cambia la entrada de un archivo.
event: es el evento de cambio predeterminado que incluye el propio archivo. imageInputElement: es el elemento en el que quiero representar el nuevo archivo. y maxWidth es el ancho que paso a la función para especificar el ancho máximo
El problema real: el archivo se volverá visible en el navegador y se cargará en el depósito s3, pero el archivo se bloquea cuando quiero descargarlo nuevamente.
en vez de
const file = event.target.files[0]debería haber usado
var blobBin = atob(srcEncoded.split(',')[1]); var array = []; for(let i = 0; i < blobBin.length; i++) { array.push(blobBin.charCodeAt(i)); } const result:any = new Blob([new Uint8Array(array)], {type: 'image/png'});obtuve mi respuesta de aquí