vue-simple-uploader 解析

一、文件来源

git地址 https://github.com/simple-uploader/vue-uploader
复制代码

二、src目录

|-- common                         // 通用
    |-- file-events.js             // 部分文件事件名称
    |-- mixins.js                  // 注入uploader 判断支持情况
    |-- utils.js                   // 工具函数
|-- components                     // 组件
    |-- btn.vue                    // 按钮上传
    |-- drop.vue                   // 拖拽上传
    |-- file.vue                   // 核心 - 单文件上传
    |-- files.vue                  // 多文件上传 引入file.vue
    |-- list.vue                   // 文件列表  与files.vue内容基本一致
    |-- unsupport.vue              // 不支持file API时组件
    |-- uploader.vue               // 主组件
|-- index.js                       // 全局注册导出
复制代码

三、components下各文件详解

1、uploader.vue

引入

引入 uploader 实例
引入 驼峰式字符串转连字符字符串函数
引入 其他所有组件
复制代码

页面逻辑

(1)provide uploader 指向 this，以便在子组件中调用

(2)在created中 创建uploader实例,给该实例方法绑定文件添加、文件夹添加、文件移除、文件提交、绑带所有函数， 将此实例赋值给this.uploader,同时赋值this.uploader下上传状态文案字典

(3)在destroyed中 ,对this.uploader 解除上述函数的绑定，然后销毁this.uploader

props

option {Object} 上传配置参数
autoStart {Boolean} 是否自动上传
fileStatusText {Object|Function} 上传时状态文案
复制代码

2、btn.vue

页面逻辑

(1) 通过minxin获取 uploader实例和 support

(2)根据File API支持情况显示组件

(3)mounted中 使用uploader的assignBrowse绑定dom 指定该dom可触发上传

prop

directory {Boolean} 是否是文件夹上传
single {Boolean} 是否是单文件上传
attrs
复制代码

3、drop.vue 拖拽上传组件

页面逻辑

(1) 通过minxin获取 uploader实例和 support

(2)根据File API支持情况显示组件

(3)mounted 使用uploader的 assignDrop绑定dom 指定该dom可触发拖拽上传；监听拖拽进入、拖拽离开、拖拽函数并绑定事件

(4) beforedestroyed中，解除上述绑定函数，取消指定的 DOM 元素作为拖拽上传目标

4、list.vue 和 files.vue

(1) 通过minxin获取 uploader实例
(2) 引入 ./file.vue

5、unsupport.vue

页面逻辑

(1) 通过minxin获取 uploader实例和 support
(2) 判断不支持File API时显示该组件

6、file.vue

引入

1 引入uploader.js （该条与minxin重复，可尝试优化）
2 引入file-event
3 引入时间转化
复制代码

页面逻辑

(1)在mounted中，将方法赋值给uploader实例；设置操作事件；绑定监听操作的事件；

(2)在destroyed中，解除事件监听；清空操作事件；

prop

file {Object} 当前待上传文件
list {Boolean} 含义未知
复制代码

computed

fileCategory 返回文件类型
progressStyle 进度样式
formatedAverageSpeed 下载速度
status 文件上传下载状态
statusText 状态文案
formatedTimeRemaining 时间
复制代码

watch

status 监听状态修改进度的class
复制代码

methods

_actionCheck      // 返回实时上传状态
pause             // 暂停
resume            // 继续上传
remove            // 移除
download          // 下载
retry             // 重新上传
processResponse   // 获取上传后返回的文案
fileEventsHandler // 文件事件操作
_fileProgress     // 获取上传进度信息
_fileSuccess      // 文件上传成功
_fileError        // 文件上传失败
复制代码