vue-drop-upload

基于vue的批量上传组件，支持上传文件、文件夹。支持拖拽上传

安装

npm install vue-drop-upload

功能介绍

• 按钮点击上传文件、文件夹；
• 拖拽上传文件、文件夹；
• 多文件上传；
• 支持大文件分片；
• 支持自动上传；
• 自定义请求头；
• 自定义请求参数；
• 自定义过滤上传文件名；
• 支持配置一次上传最大数量（仅限最外层文件、文件夹）；
• 支持单文件最大上传限制（单位：KB）；
• 可定义不能上传文件夹、只支持文件夹等...
• 可定义最外层只支持上传文件夹；
• 详细的错误提示机制；

示例

使用

init

import Vue from 'vue'
import uploader from 'vue-drop-upload'
import App from './App.vue'
 
Vue.use(uploader)
 
new Vue({
  render(createElement) {
    return createElement(App)
  }
}).$mount('#app')

App.vue

<template>
  <upload
    :multiple="uploadOptions.multiple"
    :action="uploadOptions.action"
    :drag="uploadOptions.drag"
    :upload-folder="uploadOptions.uploadFolder"
    :params="uploadOptions.params"
    :onerror="uploadOptions.error"
    ref="upload"
    >
    <i slot="icon">上传图标</i>
    <button type="button" name="file-button" class="upload-default" slot="file">上传文件</button>
    <button type="button" name="folder-button" class="upload-default" slot="folder">上传文件夹</button>
    <button type="button" name="button" class="upload-default" slot="submit">上传至服务器</button>
    <div class="tip-default" slot="tip">
      支持上传文件、文件夹
    </div>
  </upload>
</template>
<script>
  export default {
    data () {
      uploadOptions: {
        multiple: true,
        action: '',
        drag: true,
        uploadFolder: true,
        params: {},
        onerror: this.onerror
      }
    },
    methods: {
      onerror (err) {
 
      }
    }
  }
</script>

slots

   所有slot都有默认值，都可不传

slot="icon" 拖拽监听框中的图标slot

slot="file" 选择文件按钮slot，有默认class:upload-default

slot="folder" 选择文件夹按钮slot，有默认class:upload-default

slot="submit" 上传按钮slot，有默认class:upload-default

slot="tip" 补充文字说明，有默认class:tip-default

props

prop	type	description	default
action	String	必选参数，上传的地址	——
headers	Object	自定义请求头	——
params	Object	自定义请求参数	——
multiple	Boolean	是否支持多文件上传（只对上传文件的按钮有效）	false
drag	Boolean	是否支持拖拽上传	false
onlyDrag	Boolean	是否只支持拖拽上传	false
isShowUploadList	Boolean	是否显示上传列表	true
accept	String	支持的文件上传格式（只对上传文件的按钮有效）	——
uploadFolder	Boolean	是否支持上传文件夹	false
limitRootCount	Number	最外层文件、文件夹支持的一次性上传个数	100
allowRootRepeate	Boolean	是否允许最外层文件、文件夹名称重复上传	true
rootOnlyNeedFolder	Boolean	最外层是否只支持上传文件夹	false
maxSize	Number	单文件上传大小限制（单位：B）	——
isPerPiece	Boolean	是否对大文件进行分片	false
pieceLimit	Number	分片大小限制（单位：KB）	5242880
fileNameFilters	Array	需要过滤的文件名集合	——
autoUpload	Boolean	是否选择后自动提交	false
uploadingAllowUpload	Boolean	正在上传中时是否支持选择、拖拽上传	true
allowChangeRootName	Boolean	是否支持更改最外层文件、文件夹名称	true
onlyNeedUploadOneRoot	Boolean	是否只允许上传一个最外层文件、文件夹（二次选择会覆盖前次选择的文件、文件夹）	false
allowDeleteRoot	Boolean	是否允许删除文件、文件夹（上传列表是否显示删除按钮）	true
showFileSize	Boolean	是否显示已经上传的文件大小/总文件大小	true
withCredentials	Boolean	跨域时是否发送cookie	false
onerror	Function	错误信息回调	——
uploadStart	Function	开始上传回调	——
uploadEnd	Function	上传结束回调	——
fileSelected	Function	点击选择文件按钮，选择后的回调，参数为选择的文件	——
folderSelected	Function	点击选择夹文件按钮，选择后的回调，参数为选择的文件夹中的文件列表	——
droped	Function	拖拽后文件、文件夹解析完毕后的回调，参数为解析后的拖拽问价、文件夹（形式为目录树对象）	——
deleteRoot	Function	删除一个根文件、文件夹的回调，参数：删除文件的index， 删除的文件解析对象，next回调（需要在执行完毕业务程序后调用该回调，执行删除,若不调用next则不执行删除文件、文件夹）	null
uploadOneFile	Function	上传完成一个文件的回调，参数：{ file, response }; file（上传文件的相关信息），response（后端返回的参数信息）	——
changeRootName	Function	更改最外层文件、文件夹名称回调	——

实例方法

调用方式：this.$refs.upload.submit()

名称	用途	注意事项
submit	提交所选择的文件、文件夹	——
abort	取消上传，终止正在发送的请求	——
clear	清空上传列表	正在上传中不会操作，并发送一个code:9 的error
setOriginalData	设置上传列表数据	传入参数必须为Array，一项列表数据表示一个最外层文件、文件夹

关于setOriginalData方法的参数举例：

[
  {
    name: '文件夹1', // 文件夹名称
    type: 'folder', // 文件夹类型(默认)
  },
  {
    name: '文件1', // 文件夹名称
    type: 'file', // 文件类型
  }
]

获取全部的上传数据

调用方式：this.$refs.upload.originalData
| 该数据包含上传列表中的所有数据，树状对象描述的目录树结构。

errorMap (重要)

项目中所有的异常操作都会调用error回调，参数：

{
  code: 0, // 根据code确定错误类型
  message: '', // 错误提示文案
  data: {} // error对象，主要用于httpError
}

code	type	description
1	typeError	反应不支持上传文件夹
2	httpError	ajax请求onerror捕获的错误
3	responseErrorCode	请求成功，但后端返回status不是100
4	limitRootCountError	外层文件、文件夹超过限制的数量
5	rootOnlyFolderError	外层只支持上传文件夹，却上传了文件
6	maxSizeError	但文件大于最大限制
7	emptyUpload	上传文件为空
8	emptyFolderSelect	选择了空文件夹
9	uploadingNotClear	正在上传中执行了clear
10	uploadingNotAllowUpload	正在上传中不允许选择、拖拽文件
11	rootNameRepeat	最外层文件、文件夹名称重复
12	callbackError	调用回调函数过程中捕捉到的错误

外附说明

分片实现，当上传第一个分片时，后端需要回传uploadId参数，作为后续分片的uploadId参数的值，以此来区分多个分片是属于同一文件。

由于我自己公司项目，返回状态码200时，同时需要response.status === 100才为请求成功，因此在代码中有依赖于这一个条件，思考良久没有想到方法可以将这个拆分出去。如有建议可以信息我～～～有需要用到此项目的小伙伴，可自行copy稍作更改即可。