@bzlab/bz-upload

v0.3.10

Published

2 months ago

基于vue的文件上传组件

Downloads

0High
0Medium
0Low

bzlab

bz-upload

上传文件插件

已支持参数及事件列表

:aliyun="aliyun"
:directory="directory"
:action="uploadPath"
:mergeAction="mergeAction"
:mergeMethod="mergeMethod"
:mergeHeaders="mergeHeaders"
:download="downloadPath"
:headers="headers"
:keepOrigin="keepOrigin"
:ossDataEnum="ossDataEnum"
:downloadDataEnum="downloadDataEnum"
:ossPrefix="ossPrefix"
:ftpPrefix="ftpPrefix"
:data="data"
:multiple="multiple"
:name="name"
:showFileList="showFileList"
:showTotal="showTotal"
:accept="accept"
:acceptStrict="acceptStrict"
:fileList="fileList"
:autoUpload="autoUpload"
:disabled="disabled"
:hideRemove="hideRemove"
:limit="limit"
:directoryWords="directoryWords"
:fileWords="fileWords"
:onWords="onWords"
:beforeUpload="beforeUpload"
:beforeRemove="beforeRemove"
:onRemove="onRemove"
:onStart="onStart"
:onSuccess="onSuccess"
:onProgress="onProgress"
:onError="onError"

快速上手

npm i @bzlab/bz-upload --save

// 全局引入
import BzUpload from '@bzlab/bz-upload'
import "@bzlab/bz-upload/lib/bz-upload.css"
Vue.use(BzUpload)

// 按需引入
import { BzUpload } from '@bzlab/bz-upload'
components: {
  BzUpload
}

文档

props 配置项

| 序号 | 参数 | 说明 | 默认值 | | ---- | ---- | ---- | ---- | | 1 | aliyun | 是否通过阿里云上传 | true | | 2 | directory | 是否文件夹上传 | false | | 3 | action | 获取文件上传参数地址 | action | | 4 | download | 获取文件下载地址 | download | | 5 | headers | 请求头 | headers | | 6 | ossDataEnum | oss请求参数枚举 | { md5, size } | | 7 | downloadDataEnum | download请求参数枚举 | { name, key } | | 8 | ossPrefix | oss上传前缀 | - | | 9 | ftpPrefix | ftp上传前缀 | - | | 10 | data | 请求附加参数 | data | | 11 | filterDataFields | 过滤请求参数 | [] | | 12 | method | 请求方式 | post | | 13 | timeout | 请求超时时间 | 1000 * 60 * 60 | | 14 | multiple | 多选文件 | false | | 15 | name | 文件blob名 | file | | 16 | showFileList | 显示上传列表 | false | | 17 | showTotal | 显示上传总数量 | false | | 18 | accept | 文件上传类型 | accept | | 19 | acceptStrict | 文件上传类型，严格模式会过滤文件 | acceptStrict | | 20 | fileList | 文件列表 | [] | | 21 | autoUpload | 是否自动上传 | true | | 22 | disabled | 是否禁用 | false | | 23 | drag | 是否拖拽 | false | | 24 | dragLimit | 拖拽上传个数限制 | 500 | | 25 | hideRemove | 是否隐藏删除按钮 | false | | 26 | limit | 限制上传个数 | limit | | 27 | directoryWords | 限制上传文件夹字数 | - | | 28 | fileWords | 限制上传文件字数 | - | | 29 | keepOrigin | 保持上传文件夹/文件原始结构 | - | | 30 | showMd5 | 显示Md5 | false | | 31 | wasmMd5 | 用wasm计算md5 | false | | 32 | enableChunkUpload | 开启分片上传 | false | | 33 | mergeAction | 合并请求地址 | /ftp/mergeChunks | | 34 | mergeMethod | 合并请求方法 | post | | 35 | mergeHeaders | 合并请求头 | { 'Content-Type': 'application/x-www-form-urlencoded' } |

Events 事件

| 序号 | 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | ---- | | 1 | beforeUpload | 上传拦截事件 | function(file) | | 2 | beforeRemove | 删除拦截事件 | function(file, fileList) | | 3 | onRemove | 删除事件 | function(file, fileList) | | 3 | onExceed | 超出限制事件 | function(postFiles, files) | | 4 | onStart | 开始上传事件 | function(file, fileList, treeList) | | 5 | onSuccess | 上传成功事件 | function(res, file, fileList, treeList) | | 6 | onProgress | 上传进度事件 | function(ev, file, fileList) | | 7 | onError | 上传失败事件 | function(err, file, fileList) | | 8 | onWords | 文件夹，文件字数拦截事件 | function(postFiles, files) | | 9 | onDrag | 拖拽结束事件 | function(status, files) |

ref 事件

| 序号 | 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | ---- | | 1 | handleRemove | 手动删除文件 | function({ uid }) | | 2 | handleUpload | 手动上传文件 | function(file) | | 3 | submit | 手动触发上传 | - |

slot

| 序号 | 名字 | 说明 | | ---- | ---- | ---- | | 1 | tip | 用于插入tip数据 | | 2 | - | 默认插槽数据 |

例子

<bz-upload
  :headers="headers"
  :action="uploadPath"
  :download="downloadPath"
  :accept="accept"
  :before-upload="beforeUpload"
  :on-exceed="uploadExceed"
  :on-start="uploadStart"
  :on-words="uploadWords"
  :on-progress="uploadProgress"
  :on-success="uploadSuccess"
  :on-error="uploadError"
>
  <el-button type="primary">上传</el-button>
</bz-upload>

setup() {
  const state = reactive({
    headers: {
      token: ''
    },
    accept: '.jpg,.jpeg,.png,.gif',
    uploadPath: '',
    downloadPath: '',
  })
  const beforeUpload = (file, files) => {
    console.log('beforeUpload', file, files)
    return false|new Promise((resolve, reject) => reject())
  }
  const uploadExceed = (postFiles, files) => {
    console.log('uploadExceed', postFiles, files)
  }
  const uploadStart = (file, fileList, treeList) => {
    console.log('uploadStart', file, fileList, treeList)
  }
  const uploadWords = (postFiles, files) => {
    console.log('uploadWords', postFiles, files)
  }
  const uploadProgress = (res, file) => {
    console.log('uploadProgress', res, file)
  }
  const uploadSuccess = (res, file, fileList, treeList) => {
    console.log('uploadSuccess', res, file, fileList, treeList)
  }
  const uploadError = (res, file) => {
    console.log('uploadError', res.status, res, file)
  }

  return {
    uploadExceed,
    uploadStart,
    uploadProgress,
    uploadSuccess,
    uploadError,
    ...toRefs(state)
  }
}

发布包

npm publish --registry http://npm-hub.inside.qimiaowa.com
npm publish --registry https://registry.npmjs.org --access public

卸载包

npm unpublish @bzlab/bz-upload --force --registry http://npm-hub.inside.qimiaowa.com

安装

npm install @bzlab/bz-upload --save

注意

更改包后一定要重新打包，更新版本号，否则安装会有缓存

npm cache clean -f

更新说明

0.0.1 支持阿里云、普通批量上传
0.0.2 增加上传列表显示
0.0.3 修复hash重名，增加手动删除文件
0.0.4 修复onChange触发多次
0.0.5 增加ftp上传
0.0.6 增加手动上传文件
0.0.7 修复已知bug
0.0.8 增加文件夹上传
0.0.9 修复上传拦截bug
0.1.1~0.1.2 修复空文件无法上传
0.1.3 上传拦截增加文件夹层级计算
0.1.4~0.1.5 增加triggerType自定义上传
0.1.7 修复获取文件名称bug
0.1.8 修复文件夹上传问题
0.1.9 修复上传进度
0.2.0 文件夹上传过滤指定格式文件
0.2.1 修复文件夹生成多个
0.2.5 增加文件上传字符限制
0.2.6 增加文件后缀转小写
0.2.7 优化大文件计算
0.2.8 增加文件导入功能
0.2.9 支持文件和文件夹拖拽
0.3.0 增加文件数量统计
0.3.1 支持上传文件夹/文件原始结构
0.3.3 修复数据序列化问题
0.3.4 拦截接口报错response日志
0.3.5 增加wasm计算md5，提高计算速度
0.3.6 手动上传增加beforeUpload
0.3.7 增加ftp分片上传
0.3.8 修复beforeUpload返回md5
0.3.9 修改accept拦截不过滤文件
0.3.10 过滤path字段

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme