vue-drop-upload v0.1.7

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

实例方法

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

关于setOriginalData方法的参数举例：

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

获取全部的上传数据

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

errorMap (重要)

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

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

外附说明

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

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