@bzlab/bz-upload

bz-upload

上传文件插件

已支持参数及事件列表

:aliyun="aliyun"
:directory="directory"
:action="uploadPath"
: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"
: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	fileList	文件列表	[]
20	autoUpload	是否自动上传	true
21	disabled	是否禁用	false
22	drag	是否拖拽	false
23	dragLimit	拖拽上传个数限制	500
24	hideRemove	是否隐藏删除按钮	false
25	limit	限制上传个数	limit
26	directoryWords	限制上传文件夹字数	-
27	fileWords	限制上传文件字数	-
28	keepOrigin	保持上传文件夹/文件原始结构	-
29	showMd5	显示Md5	false

Events 事件

序号	事件名	说明	回调参数
1	beforeUpload	上传拦截事件	function(file)
2	beforeRemove	删除拦截事件	function(file, fileList)
3	onRemove	删除事件	function(file, fileList)
3	onExceed	超出限制事件	function(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(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"
  :on-exceed="uploadExceed"
  :on-start="uploadStart"
  :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 uploadExceed = files => {
    console.log('uploadExceed', files)
  }
  const uploadStart = (file, fileList, treeList) => {
    console.log('uploadStart', file, fileList, treeList)
  }
  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 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 修复数据序列化问题