1.0.8 • Published 4 years ago

wufly-upload-folder v1.0.8

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

wufly-upload-folder

安装

npm i wufly-upload-folder

使用

import Vue from 'vue';
import VueUploadSpace from 'wufly-upload-folder';

Vue.use(VueUploadSpace);
    <wufly-upload-folder
      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>
    </wufly-upload-folder>
    

<script>
export default {

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

Documentation 更多参数可看dropzone的文档

props

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

prop nametypedefaultdescriptionrequired
idstringdropzone组件定义的id名必传
optionsobject{ }dropzone 配置对象 可看dropzone官网必传
destoryDropzonebooleantrue组件销毁时会销毁dropzone实例不是必传
useCustomeSlotbooleanfalse用户自定义的分发内容 (dropzone库有默认 一般我们自己添加)不是必传
folderUrlString''文件夹上传地址(如果有文件夹要上传)选传

events

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