Как загрузить изображения в Vue JS

0

Intro

Загрузка файлов и изображений является обязательной функцией для многих нетривиальных приложений. К счастью для нас, его легко настроить в приложениях Vue с помощью vue-picture-input.

1

Установка

Установите vue-picture-input через npm или Yarn:

$ npm install --save vue-picture-input
# or:
$ yarn add vue-picture-input

2

Использование

Библиотека vue-picture-input очень проста в использовании:

Вот несколько свойства, которые мы будем использовать:

ref: Нам понадобится для доступа к строке формата base64
width, height: Задают ширину и высоту компонента
accept: Используется для ограничения допустимых типов файлов
removable: Указывает, может ли компонент быть сброшен или нет

Кроме того, компонент генерирует следующие события:

removed: инициируется при отсоединении изображения от компонента
changed: инициируется, когда выбранный снимок изменяется (т. е. повторно выбран)

Вот так выглядит наш пример:

3

Загрузка на сервер

Давайте добавим кнопку, которая позволит нам загрузить выбранное изображение на наш сервер.

При щелчке вызывается метод tryUpload с отключенной привязкой класса. Она будет включена, только если есть выбранное изображение:

Затем мы будем использовать Axios для создания сетевых запросов. Мы также используем API Formdata для создания композиции данных изображения для публикации:

Вышеприведенный код принимает URL-адрес в качестве первого параметра, а файл-объект в качестве второго параметра. Он также устанавливает тип содержимого заголовка multipart / formdata, чтобы наш API-интерфейс мог определить, что находится в запросе.

Поэтому мы можем использовать приведенный выше код так:

Вот как выглядят наши методы onChanged, onRemoved и tryUpload:

Похожие публикации

Комментарии