Прочтите эту статью в темном режиме, легко скопируйте и вставьте образцы кода и откройте для себя больше подобного содержимого на Devjavu.
Использование Javascript FileReader API.
Раньше я писал о загрузке нескольких изображений из приложения Vue в серверную часть Laravel. В этом решении мы использовали объект Javascript FormData. Вот эта статья, если вы ее пропустили:
Однако в этом решении мы будем использовать FileReader API Javascript, который позволяет нам читать содержимое файлов изображений и обрабатывать эти файлы в формате base64. Независимо от используемого языка серверной части, изображения в кодировке base64 могут быть декодированы на сервере и сохранены локально в файловой системе (или в облачном хранилище).
Как это работает
Вот небольшая иллюстрация, чтобы лучше понять процесс загрузки изображения Base64. При взаимодействии с вашим веб-приложением пользователь может выбрать изображение (с помощью тега input с типом файла) со своего устройства, содержимое выбранного изображения считывается с помощью FileReader API, мы отправляем строку base64 в URL-адресе данных. форматировать в серверный API.
На бэкэнде строка base64 декодируется из строкового формата в исходный файловый объект, затем мы можем сохранить декодированный файл и вернуть путь / URL-адрес хранилища во внешний интерфейс.
Вплоть до базового уровня
Что такое Base64?
Base64 или Radix 64 - это система кодирования двоичного кода в текст, которая позволяет представлять двоичные данные в строковом формате ASCII. Одним из распространенных приложений кодирования base64 в Интернете является кодирование двоичных данных, чтобы их можно было включить в data: URL.
Данные: URL?
URL-адреса данных - это URL-адреса с префиксом «data:», они позволяют встроить содержимое файла в документы (.html). URL-адреса данных состоят из трех основных частей после префикса «data:»:
data:[<mediatype>][;base64],<data>
Часть [‹mediatype›] относится к формату файла, она может содержать любое из следующих значений:
- text / plain - для текстовых файлов
- image / jpeg или image / jpeg - для файлов изображений .png и .jpeg.
- application / pdf - для файлов .pdf и т. д.
Часть [‹base64›] является необязательной и ее можно игнорировать, если данные не являются текстовыми. Последняя часть - это текстовое (или нетекстовое) содержимое файла. Технически это формат, в котором мы будем отправлять изображения.
FileReader API
Что это?
Объект FileReader позволяет веб-приложениям асинхронно считывать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, используя объекты File или Blob для указания файла или данных для чтения. - MDN
Когда пользователь выбирает файл с помощью тега input, запускается событие изменение, этот объект события содержит объект FileList, который позволяет вам получить доступ к списку файлов, выбранных с помощью элемента <input type="file">.
FileReader API имеет 4 метода чтения содержимого файлов:
FileReader.readAsArrayBuffer()FileReader.readAsBinaryString()FileReader.readAsDataURL()FileReader.readAsText()
Нас интересует метод readAsDataURL, поскольку он позволяет нам читать содержимое файла Blob и возвращать объект со свойством result, содержащим data: URL, представляющий данные файла.
Начиная
Во-первых, убедитесь, что у вас установлены все требования Vuejs. Мы будем использовать Vue CLI для обслуживания нашего приложения, однако мы не будем строить все приложение Vue с помощью CLI. Благодаря мгновенному прототипированию Vue CLI мы можем обслуживать один файл Vue.
Давайте создадим каталог нашего проекта.
$ mkdir vue-base64 vue-base64/assets vue-base64/assets/styles $ touch vue-base64/Index.vue && touch vue-base64/assets/styles/main.css
Каталог нашего проекта будет выглядеть примерно так:
.
|--vue-base64
|-- Index.vue
|-- assets
|-- styles
|--main.css
В нашем разделе шаблонов мы напишем базовую структуру для нашего изображения и элементов ввода.
Шаблон
Здесь мы создаем карточку для размещения нашего изображения и кнопки ввода. Во входном теге мы прослушиваем событие изменения и вызываем метод «handleImage» каждый раз, когда это событие запускается. Мы также привязываем атрибут изображения «src» к реактивному свойству «image» (мы добавим это свойство к нашему объекту данных в разделе сценария), поэтому изображение обновляется каждый раз, когда выбран новый.
Мы добавим немного стиля в наш файл CSS (main.css).
CSS
Импортируйте файл CSS в Index.vue следующим образом:
Сценарий
В разделе сценария первое, что нам нужно сделать, это объявить реактивное свойство (изображение) в нашем объекте данных. Затем мы объявим метод «handleImage» для ответа на событие on-change, инициированное тегом input, мы берем первый Blob из объекта FileList и назначаем его переменной.
Затем мы вызываем метод createBase64Image, который реализует FileReader API, использует метод readAsBinaryString для выбранного изображения, а затем присваивает результирующее строковое значение изображению После срабатывания события onload (событие запускается каждый раз, когда операция чтения успешно завершена).
Из терминала вы можете обслуживать один файл Vue, набрав:
$ vue serve Index.vue
Если вы проверите результат, сгенерированный с помощью Vue DevTool, вы заметите, что файл теперь имеет формат URL-адреса данных.
Примечание. Атрибут src элемента ‹img› tag может содержать URL - адрес или данные URL изображения.
Бэкэнд (Node.js)
Эта реализация не ограничивается только Node.js или Javascript, используя правильную библиотеку или встроенные API-интерфейсы, вы можете преобразовать строку base64 в файл изображения и сохранить в файловой системе вашего приложения практически на любом выбранном внутреннем языке.
Поскольку Vue.js использует среду выполнения Nodejs в фоновом режиме, мы можем разместить нашу серверную часть в одном каталоге проекта, чтобы оба приложения могли совместно использовать библиотеки. Давайте внесем небольшие изменения в папку проекта. Из корневого каталога мы выполним базовую настройку сервера Node.js Express.
$ npm init -y && mkdir server server/public && touch server/app.js
Каталог нашего проекта теперь должен выглядеть примерно так:
|-- Index.vue
|-- assets
|-- styles/main.css
|-- server
|-- public
|-- app.js
`-- package.json
Установим все необходимые пакеты. Вот что нам нужно:
- экспресс веб-фреймворк Nodejs
- body-parser: для разбора тел входящих запросов.
- axios: для отправки HTTP-запросов из нашего приложения Vue.
- cors: чтобы мы могли отправлять запросы между одним и тем же источником.
- base64-img: для преобразования изображений в base64 или для преобразования base64 в изображения.
$ npm i base64-img axios cors express body-parser
После установки откройте app.js, настройте экспресс-сервер и создайте маршрут для обработки загрузки, декодирования и хранения изображений.
Здесь мы говорим нашему экспресс-серверу использовать cors, парсер тела JSON (важно установить ограничение, так как изображения base64 могут быть очень большими). Мы также устанавливаем папку «./server/public» в качестве нашей статической папки (здесь мы будем хранить декодированные изображения).
Затем мы настраиваем сервер для ответа на запрос POST в конечной точке / upload, получая строку изображения из тела запроса, передавая строку изображения в файл base64Img.img (…) функция (эта функция принимает 4 аргумента; строку base64, путь для хранения изображения, имя файла и функцию обратного вызова, которая возвращает путь к файлу. Наконец, мы берем имя файла из пути и возвращаем URL-адрес пользователю.
Примечание: мы используем функцию Date.now () в качестве имени файла, чтобы сохранить уровень уникальности. Поскольку функция возвращает количество миллисекунд, прошедших с 1 января 1970 года, почти невозможно получать одно и то же значение каждый раз при вызове функции.
Давайте внесем некоторые изменения в наше приложение Vue.
Добавьте новое свойство «remoteUrl» к объекту данных, оно будет содержать значение URL-адреса, возвращаемого нашим сервером. Затем нам нужно импортировать Axios и создать метод для обработки нашего почтового запроса на сервер.
Мы вызовем этот метод в нашем событии reader.onload (…).
Наконец, давайте визуализируем URL-адрес изображения, возвращаемый сервером, чтобы убедиться, что мы получили правильный файл с сервера. Добавьте это ниже div .container в раздел вашего шаблона:
Ваш файл Index.vue должен выглядеть примерно так:
Собираем все вместе
В наш package.json мы добавим два сценария: один для запуска нашего приложения Vue, а другой - для запуска нашего экспресс-сервера.
Отсюда вы можете открыть две вкладки на своем терминале и запустить оба сценария.
$ npm run ui $ npm run server
У вас должен быть сервер, работающий на порту 8081, а ваше приложение Vue - на порту 8080. Перейдите в свое приложение Vue и проверьте.
Как я уже упоминал ранее, вы можете реализовать декодирование изображений в формате base64 на любом предпочтительном языке. Не стесняйтесь экспериментировать с исходным кодом здесь:
Ура ☕️
