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) | -