Drag-n-drop загрузчик файлов в Vue.js

Development, Java | Amber | Комментировать запись

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.