Vue конвертирует изображение в base64

Я хочу преобразовать локальное изображение в base64. Ридер.readAsDataURL не работает. Я всегда получаю неопределенное значение для переменной rawImg. Значение для файла var — это метаданные из файла, который я пытаюсь загрузить.

HTML:

<input
  type = "file"
  accept = "image/jpeg/*"
  @change = "uploadImage()"
/>

JS:

uploadImage() {
  const file = document.querySelector('input[type=file]').files[0]
  const reader = new FileReader()

  const rawImg = reader.readAsDataURL(file)
  console.info(file)
  console.info(rawImg)
}
.readAsDataURL асинхронный
Bravo 15.12.2020 22:08

совет: цикл [0] walla.. загрузка нескольких файлов

Lawrence Cherone 15.12.2020 22:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
2
11 060
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это не сработает, если вы установите изображение непосредственно из readAsDataURL, которое всегда возвращает undefined. Вместо этого используйте событие onloadend:

const file = document.querySelector('input[type=file]').files[0]
const reader = new FileReader()

let rawImg;
reader.onloadend = () => {
   rawImg = reader.result;
   console.info(rawImg);
}
reader.readAsDataURL(file);
console.info(file)

Другие вопросы по теме