Как мне на фронте получить буфер от изображения?

Question

[Daksin]

Мне нужно получить данные с инпута в таком виде:

Пытаюсь через event.target.files[0] выдаёт не то что нужно()
Надеюсь на вашу помощь.
Приложение написано на vue(nuxt2)

Answer 1

[Владимир Коротенко]

C кодировкой разберетесь думаю
https://jsfiddle.net/vkorotenko/kv0ncjh2/1/

Comments

[Daksin]

Спасибо!

Answer 2

[GrayHorse]

Так просто вызови метод arrayBuffer у это объекта.
Всё.

event.target.files[0] — это объект класса File, который в свою очередь наследуется от класса Blob.

Answer 3

[Владимир]

Чтобы показать превью картинки до того, как будешь грузить на сервер используй
https://developer.mozilla.org/en-US/docs/Web/API/F...
Вот в этом методе даже пример есть
https://developer.mozilla.org/en-US/docs/Web/API/F...

Comments

[Alexandroppolus]

Для показа превью лучше использовать URL.createObjectURL

[Владимир]

Alexandroppolus, Все равно объект получать через FileReader
Ок, есть вариант передать файл напрямую из файл листа.
Скажи, а почему ты считаешь, что URL.createObjectURL - лучше?
Меня например смутила секция "Memory management"

[Alexandroppolus]

Владимир, base64 - это бессмысленная увеличенная копия файла. Если файл N байт, то для base64 придется аллоцировать 8N/3 байт оперативы (строка длиной 4N/3, по два байта на символ). А для показа картинки браузеру потом придется обратно декодировать эту строку. "Бонус" - ещё и асинхронная возня с ФайлРидером.

createObjectURL синхронно создаёт короткую ссылку прямо на файл на диске (никаких копий, потому и синхронно). Во время показа картинки этот файл напрямую зачитывается и отрисовывается. Просто надо не забывать URL.revokeObjectURL, но это мелочь.