如何使用vue-dropzone添加文件上传

警告： 自发布以来，此组件有通知：“此组件已远远超出我最初的预期，我无法提供用户所需的支持量。”

介绍

vue-dropzone 是一个在 Dropzone.js 之上实现的 Vue 组件，它为文件上传和图像预览提供拖放功能。

它非常强大并且有很多选项，尽管它为您提供了大量开箱即用的功能，几乎不需要配置。您可以进行多个文件上传、取消它们、验证文件大小和格式、显示进度条等等！

设置项目

让我们从安装 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>

注意： URL https://httpbin.org/post 是来自 HTTP 服务的端点，它为任何 HTTP POST 调用返回有效响应。

应用选项

唯一需要的选项是 url，但您可以使用更多选项。

例如，假设您想要：

最多4个文件
2 MB 最大文件大小
以 500 字节的块发送
设置自定义缩略图大小为 150px
使上传的项目可取消和可移除（默认情况下它们不是）

您可以将所有这些业务规则应用于组件，如下所示：

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 文档中查看完整选项。

控制拖放区

如果我们想实现自定义功能，vue-dropzone 公开了几个方法，我们可以通过在 <vue-dropzone> 标签上使用 ref 来访问这些方法。

例如，我们可以实现一个删除所有上传文件的按钮：

<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>

处理事件

有一堆事件可用于在发生某事时执行任何类型的操作。

例如，要检查文件何时上传，我们可以使用 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 默认情况下以可自定义的形式为您提供所有这些，因此在使用事件之前检查您想要的功能是否已经存在。

自定义样式

为了自定义 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。

您可以在 this Codesandbox 中找到工作演示和本文中的代码。