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();
}