@4tw/vue-drop-zone 中文文档教程

Question

vue-drop-zone

使用 uppy.io 进行拖放上传的 vue 组件。

Installation

yarn add @4tw/vue-drop-zone

Usage

使用 DropZone 组件包装您想要放置的组件。 使用 v-model 绑定来显示所有文件的列表。 文件列表还包括进程和其他元数据。

<DropZone>
  <div
      id="this-is-droppable"
      v-model="files"></div>
</DropZone>
<ul>
  <li v-for="file in files">
    {{ file.name }}
  </li>
</ul>

import DropZone from '@4tw/vue-drop-zone'

{
  name: 'MyDropZone',
  data() {
    return { files: [] };
  },
  components: { DropZone }
}

Properties

• endpoint[String:document.URL]: Describes the endpoint where the dropzone should upload the files to
• uploader[Object:{ uploader:Class, options:Object }]: Describes the uploader to be used. Uppy already provides two uploaders for XHR: https://uppy.io/docs/xhr-upload/#Options or TUS: https://uppy.io/docs/tus/#Options.
• options[Object:{}]:
• uppy[Object:{}] for the uppy client options (https://uppy.io/docs/uppy/#Options),
• preventUpload[Boolean:false] when set to true, the upload is not triggered automatically when dropping a file
• v-model[Array:[]]: Use the v-model to have a list of uppy files in the current state (https://uppy.io/docs/uppy/#uppy-getFile-fileID)
• file-browser[Boolean:false]: Define if the dropzone should also be clickable to allow the user to select the files using the native file browser.
• multiple[Boolean:true]: Define if multiple files can be uploaded.

Uppy Client

客户端位于每个 drop-zone 实例上，可以使用 ref 检索：

<DropZone ref="dropzone" />

this.$refs.dropzone.client.uppy.pauseAll();
this.$refs.dropzone.client.uppy.retryAll();

有关所有可用方法，请参阅 https://uppy.io/docs/uppy/#Methods。 不建议乱用插件。 还要尽量避免使用 close 和 reset。 管理客户端的状态 由客户自己。

Events

• client-initialized: Triggers when the drop-zone client has been initialized. Use this event to customize the client.
• entered: Triggers when the mouse pointer enters the dropping area
• left: Triggers when the mouse poiter has left the dropping area
• dropped: Triggers when the files are dropped
• success: Triggers when the upload successfully finished
• error(File file): Triggers when the upload fails. Also provides the file
• upload(File[] files): Triggers when preventUpload is set to true and the upload would start. Also provides the files being uploaded that failed the first as an event argument.

Development

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Release

yarn run release