vue-upload-folder

安装

npm i vue-upload-folder-hy

使用

import Vue from 'vue';
import VueUploadFolderHy from 'vue-upload-folder-hy';

Vue.use(VueUploadFolderHy);

    <vue-upload-folder-hy
    id="dropzone"
    ref="myDropzone"
    :options="dropzoneOptions"
    :action="folderUrl"
    :parentId="parentId"
    :useCustomSlot="true">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将图片或文件夹拖到此处上传，或点击<b>上传</b>图片</div>
  <div class="upload-tips">仅支持5M以内的jpg、png、gif格式的图片</div>
</vue-upload-folder-hy>


<script>
  export default {

    data() {
      return {
        // 传给dropzone的配置项
        dropzoneOptions: {
          autoProcessQueue: false, // 不立即上传
          url: 'xx', // 上传图片地址
        },
        parentId: 'xxx', // 如果你拖动文件夹里面还有图片 那要传一个id 
        folderUrl: 'xx' // 创建文件夹的地址
      };
    }
  };
</script>

Documentation 更多参数可看dropzone的文档

props

此组件基于 dropzone 库实现的。 相关配置参数可看官网

prop name	type	default	description	required
id	string	dropzone	组件定义的id名	必传
options	object	{ }	dropzone 配置对象 可看dropzone官网	必传
destoryDropzone	boolean	true	组件销毁时会销毁dropzone实例	不是必传
useCustomeSlot	boolean	false	用户自定义的分发内容 （dropzone库有默认 一般我们自己添加）	不是必传
folderUrl	String	''	文件夹上传地址（如果有文件夹要上传）	选传

events

Event Name	Description
file-added(file)	添加文件到dropzone
upload-success(file, response)	文件上传成功 获取服务端返回响应
upload-complete(file)	上传完成之后被调用 无论上传成功或失败
upload-error(file, message, xhr)	上传失败后被调用
upload-progress(file, progress)	文件上传进度 上传发生进度发生变化 都会定期调用 获取progress参数 至少调用一次

methods

方法	描述
removeAllFiles()	移除所有文件 正在上传的文件不会删除 如果要取消在上传的文件 翻看dropzone
removeFile(file)	移除dropzone区域的文件
getUploadingFiles()	获取所有上传的文件
getQueuedFiles()	获取所有队列的文件
getRejectedFiles()	失败的文件
getAcceptedFiles()	成功的文件

methods: {
    // 调用方法
    this.$refs.myDropzone.xxxMethod();
}