vue-upload-calc

> 上传文件 图片 图片预览 多文件 文件夹。接收多参数，多种计算回调，不提供UI显示，需要您根据回调自行发挥。这里准备一个案例 Sample.vue

安装

``bash
npm i vue-upload-calc
`

使用

> 不提供UI显示，需要您根据回调自行发挥。案例 Sample.vue

插槽里是您自己的UI，如果没有拖拽功能，也可以不在插槽这里写

`js
ref="updComponentRef"
url=""
autoUpload
>
// 执行input type=“file”的点击
button this.$refs.updComponentRef.click()

// 配置autoUpload，默认执行异步上传
button this.$refs.updComponentRef.submit()

// 配置autoUpload=false, 再执行同步上传
button this.$refs.updComponentRef.syncSubmit()

`

功能

`
- 默认插槽
- 拖拽上传
- 点击上传
- 自动上传
- 上传拦截
- 文件个数
* 单文件
* 多文件
- 文件夹
- 过滤
- 上传个数
- size
- 格式
- 自定义过滤
- 额外参数
- 任务队列状态监听
- 上传进度监听
- 失败队列监听
- 图片预览
``

props

参数|说明|类型|默认值|可选值
:---|:---|:---|:---|:---
url| 用了axios，如您有拦截，则自行配置 | String | - | apiName/fullpath
autoUpload| 是否自动上传 | Boolean | false | true
data| 携带参数 | Object | {} | -
limit| 限制个数 | Number | - | -
size| 单文件限制大小 /byte | Number | - | -
accept| 文件格式，可多个 | String | - | -
filter| 自定义过滤函数 | Function | - | -
webkitdirectory| 上传文件夹 | Boolean | false | true
multiple| 上传多文件 | Boolean | false | true
drag| 拖拽上传 | Boolean | false | true
beforeDrag| 拖拽上传前拦截 | Function(updCallback) | - | -
fileKey| 上传文件的key | String | file | -

$emit

参数|说明|类型|参数格式
:---|:---|:---|:---
on-switch|上传队列任务的开始/结束|function(Boolean)| true:开始，false：结束
on-progress|单个文件上传进度|function(progressNumber, fileName)|(0~100, '文件名')
on-success|单个文件上传结束|function(response, fileName)|(ajax_body, '文件名')
on-limit-error|上传文件个数超过限制，并阻止上传|function(Boolean)| false
fail-list|过滤不能通过的列表|function(failList)|[{file_name: '', message: ''}]
on-img-preview| 上传文件中有图片，则返回图片给预览 |function(img)|-
on-total| 总量 | function(num) | -
on-count| 剩余总量 | function(num) | -