Así que tengo una etiqueta img en mi plantilla que está vinculada a un estado "imageBuffer"
<img v-bind:src="imageBuffer" alt="" />y tengo la siguiente lógica, la página tiene dos entradas de archivo y usé esta función para manejar toda la selección de archivos:
onFilePicked(event, type) { const extension = this.getExtension(event.target.files[0].name); let isValid = false; if (type === 'pdf' && extension === 'pdf') { isValid = true; } if (type === 'image' && (extension === 'jpg' || extension === 'png')) { isValid = true; } if (isValid) { const fileReader = new FileReader(); if (type === 'pdf') { const files = event.target.files; let filename = files[0].name; fileReader.addEventListener('load', () => { }); this.pdf = files[0]; } else if (extension === 'png' || extension === 'jpg') { fileReader.addEventListener('load', () => { this.imageBuffer = fileReader.readAsDataURL(event.target.files[0]); }); } } else { alert('Invalid file type'); } },El selector de PDF funciona bien, sin embargo, cuando consola. registro el "búfer de imagen" parece que no funciona y no muestra la vista previa de la imagen. ¿Qué función debo usar de FileReader para recuperar el búfer de imagen y convertirlo en png?
El evento de carga de su lector de archivos nunca se activará porque no le indicó que leyera nada.
Consulte el método readAsDataURL . Incluso tienen un ejemplo decente de uso en esa página.
Necesitas reorganizar tu código un poco
fileReader.addEventListener('load', () => { // imageBuffer is now our dataURL from the file uploaded this.imageBuffer = fileReader.result; }); // load the file the user selected fileReader.readAsDataURL(event.target.files[0]);