1.0.1 • Published 2 years ago
vue-upload-calc v1.0.1
vue-upload-calc
上传文件 图片 图片预览 多文件 文件夹。接收多参数，多种计算回调，不提供UI显示，需要您根据回调自行发挥。这里准备一个案例 Sample.vue
安装
npm i vue-upload-calc使用
不提供UI显示，需要您根据回调自行发挥。案例 Sample.vue
插槽里是您自己的UI，如果没有拖拽功能，也可以不在插槽这里写
<Upload
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()
</Upload>功能
- 默认插槽
- 拖拽上传
- 点击上传
- 自动上传
- 上传拦截
- 文件个数
* 单文件
* 多文件
- 文件夹
- 过滤
- 上传个数
- 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) | - |