Drag-n-drop загрузчик файлов в Vue.js
Development, Java | Комментировать запись
vue-dropzone – это компонент vue, основанный на Dropzone.js, который обеспечивает функцию перетаскивания файлов для загрузки с предварительным просмотром изображений.
Этот компонент довольно мощный и имеет множество опций, но предоставляет большую функциональность и просто «из коробки», практически не требуя настройки. С vue-dropzone вы можете загружать несколько файлов, отменять загрузку, проверять размер и формат файла, настроить отображение индикатора выполнения и многое другое.
Читайте также: Drag-n-drop загрузчик файлов в React
Установка vue-dropzone
Начнем с установки vue-dropzone:
$ npm install vue2-dropzone
Затем откройте файл точки входа main.js. Здесь нужно импортировать файл CSS:
import 'vue2-dropzone/dist/vue2Dropzone.css'
Базовая загрузка изображения
Чтобы создать простую загрузку изображения, вам нужно просто импортировать компонент и предоставить ему свойства id и options:
<template> <div id="app"> <vue-dropzone id="drop1" :options="dropOptions"></vue-dropzone> </div> </template> <script> import vueDropzone from "vue2-dropzone"; export default { data: () => ({ dropOptions: { url: "https://httpbin.org/post" } }), components: { vueDropzone } }; </script>
Примечание: Адрес https://httpbin.org/post – это конечная точка сервиса http, которая возвращает валидный ответ на любой вызов HTTP POST.
Опции компонента vue-dropzone
Единственный обязательный параметр компонента vue-dropzone – это url, но использовать можно гораздо больше параметров.
Предположим, нам нужно:
- Ограничить количество загружаемых файлов до 4.
- Ограничить размер файла до 2 МБ.
- Отправлять загружаемые файлы фрагментами по 500 байт.
- Установить пользовательский размер миниатюр в 150 пикселей.
- Настроить возможность отменить загрузку и удалить загружаемые файлы (по умолчанию это не так).
Применить все эти правила к компоненту можно следующим образом:
export default { data: () => ({ dropOptions: { url: "https://httpbin.org/post", maxFilesize: 2, // MB maxFiles: 4, chunking: true, chunkSize: 500, // Bytes thumbnailWidth: 150, // px thumbnailHeight: 150, addRemoveLinks: true } }) // ... }
Как видите, большинство из этих параметров говорят сами за себя. Остановимся на addRemoveLinks – он добавляет ссылки для отмены и удаления к каждому предпросмотру в dropzone.
Просмотреть все доступные параметры можно в документации dropzone.
Управление зоной сброса файлов
Если вы хотите реализовать нестандартные функции vue-dropzone, вы можете использовать несколько методов, к которым можно получить доступ через ref на тег vue-dropzone.
К примеру, чтобы реализовать кнопку, удаляющую все загруженные файлы, можно написать такой код:
<template> <div id="app"> <vue-dropzone ref="dropzone" id="drop1" :options="dropOptions"></vue-dropzone> <button @click="removeAllFiles">Remove All Files</button> </div> </template> <script> import vueDropzone from "vue2-dropzone"; export default { // ... methods: { removeAllFiles() { this.$refs.dropzone.removeAllFiles(); } } }; </script>
События vue-dropzone
Существует множество событий, которые можно использовать для выполнения различных действий.
Например, чтобы проверить, когда был загружен файл, мы можем использовать событие vdropzone-complete:
<template> <div id="app"> <vue-dropzone ref="dropzone" id="drop1" :options="dropOptions" @vdropzone-complete="afterComplete" ></vue-dropzone> <button @click="removeAllFiles">Remove All Files</button> </div> </template> <script> import vueDropzone from "vue2-dropzone"; export default { // ... methods: { afterComplete(file) { console.log(file); } } }; </script>
Для выполнения многих распространенных операций (в том числе и для отображения сообщения в случае сбоя или отмены загрузки) использовать события не нужно. Компонент vue-dropzone предоставляет все это по умолчанию в настраиваемой форме, поэтому перед использованием события проверьте – возможно, нужная вам функция уже есть.
Оформление зоны drag-and-drop
Чтобы настроить стиль dropzone, сначала нужно установить для свойства include-styling значение false, чтобы отключить стандартный стиль:
<vue-dropzone id="drop1" :include-styling="false" ></vue-dropzone>
Затем укажите параметры previewTemplate, передав строку с шаблоном и правильной структурой, которая определяется классами. Для обучения мы можем взять шаблон из официального примера:
<vue-dropzone id="drop1" :options="dropOptions" :include-styling="false" ></vue-dropzone> <script> const getTemplate = () => ` <div class="dz-preview dz-file-preview"> <div class="dz-image"> <div data-dz-thumbnail-bg></div> </div> <div class="dz-details"> <div class="dz-size"><span data-dz-size></span></div> <div class="dz-filename"><span data-dz-name></span></div> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"><i class="fa fa-check"></i></div> <div class="dz-error-mark"><i class="fa fa-close"></i></div> </div> `; export default { data: () => ({ dropOptions: { previewTemplate: getTemplate() } }) } </script>
Затем его можно оформить с помощью CSS, указав имена классов:
<style> #drop1 { height: 200px; padding: 40px; color: white; background: black; } #drop1 .dz-preview { width: 160px; } /* ... */ </style>
Заключение
Надеемся, этот короткий мануал станет отправной точкой для самостоятельного изучения компонента vue-dropzone.
Рабочую демонстрацию и код из этой статьи можно найти в этом Codesandbox.
Tags: Vue.js