wbb-uploader

Uploader.File 对象

属性（Properties）

参数	说明	默认值	类型	可选值
uploader	对Uploader实例的引用	——	Object
name	文件（夹）名称	——	string
averageSpeed	平均上传速度，字节/秒	——	Number
currentSpeed	当前上传速度，字节/秒	——	Number
paused	表示文件（文件夹）是否暂停	——	Boolean
error	指示文件（文件夹）是否遇到错误（文件上传是否出错）	——	Boolean
isFolder	是否是文件夹	——	Boolean

如果不是文件夹，则还有以下属性：

属性名称	说明	默认值	类型	可选值
file	原生HTML5 File对象	——	Object
relativePath	文件的相对路径（如果相对路径不存在，则默认为文件名）	——	string
size	文件的字节大小	——	Number
uniqueIdentifier	分配给此文件对象的唯一标识符，该值包含在上传到服务器中以供参考，但也可以在构建上传UI时在CSS类等中使用	——	string
chunks	由 Uploader.Chunk 实例组成数组，分成的块集合，⼀般场景下并不需要关⼼它	——	Array

前端上传接口参数

参数名称	说明	默认值
chunkNumber	当前块的次序，第一块是1，注意不是从0开始的
totalChunks	文件被分成块的总数
chunkSize	分块大小，根据totalSize和这个值就可以计算出总共的块数。注意的是最后一块的大小可能会比这个还要大
totalSize	文件总大小
identifier	请求中包含的文件的唯一标识符
filename	文件名称
relativePath	选择目录时文件的相对路径（在除Chrome之外的所有浏览器中默认为文件名）
currentChunkSize	当前块的大小，实际大小

如果是oss上传，则还有以下属性：

参数名称	说明	默认值
taskId	任务id(来源：初始化接口返回的参数)
ossSlicesId	oss分片上传的唯一标识(来源：初始化接口返回的参数)
minSliceSize	当前片大小(来源：初始化接口返回的参数)
fileType	文件类型
fileName	文件名称
fileMD5	当前片的md5值

安装

yarn | npm add wbb-uploader

使用

分片上传-本地组件

文件信息上传到本地服务器

引用

import WbbShardUploader from "wbb-uploader"
import 'wbb-uploader/lib/wbb-uploader.css'

Vue.use(WbbShardUploader)

<wbb-shard-uploader ref="upload"/>

分片上传-oss组件

文件信息上传到oss服务器

引用

import WbbOssShardUploader from "wbb-uploader"
import 'wbb-uploader/lib/wbb-uploader.css'

Vue.use(WbbOssShardUploader)

<wbb-oss-shard-uploader ref="upload"/>

普通上传-本地组件

文件信息上传到本地服务器

引用

import WbbGeneralUploader from "wbb-uploader"
import 'wbb-uploader/lib/wbb-uploader.css'

Vue.use(WbbGeneralUploader)

<wbb-general-uploader ref="upload"/>

普通上传-oss组件

文件信息上传到oss服务器

引用

import WbbOssGeneralUploader from "wbb-uploader"
import 'wbb-uploader/lib/wbb-uploader.css'

Vue.use(WbbOssGeneralUploader)

<wbb-oss-general-uploader ref="upload"/>

打开上传窗口

上传文件： 调用this.$refs.upload.$emit('openUploader')

示例：

this.$refs.upload.$emit('openUploader', {
    params: {
        otherParams: 'home'
    },
    options: {
        target: 'http://xx.xx.xx.xx',
        accept: ['.mp3', '.flac', '.mp4', '.flv'],
        fileSize: 1073741824
    }
})

上传文件夹： 调用this.$refs.upload.$emit('openUploaderFolder')

示例：

this.$refs.upload.$emit('openUploaderFolder', {
    params: {
        otherParams: "home"
    },
    options: {
        target: '/api/file/upload',
        accept: ['.mp3', '.flac', '.mp4', '.flv'],
        fileSize: 1073741824
    }
})

属性(Attributes)

参数名称	类型	说明	可选值	默认值
params	Object	传给服务端的额外参数	——
options	Object	上传选项，目前支持一下几种	——	具体配置如下：

options对象的配置参数

参数名称	类型	说明	可选值	默认值
target	String	设置上传地址	——
accept	Array	设置上传类型	——
fileSize	Number	文件大小（与服务端的大小保持一致即可）,单位是字节，设置后只能传小于当前文件大小的文件，否则会给予提示	——	(1073741824)1G
fileParameterName	String	上传文件时文件的参数名	——	file
testChunks	Boolean	测试每个块向服务器发出GET请求(对应GET类型同名的target URL)，以查看它是否已经存在。如果在服务器端实现，即使在浏览器崩溃甚至计算机重新启动后，也可以恢复上传。	——	true
checkChunkUploadedByResponse	Function	可选的函数⽤于根据 XHR 响应内容检测每个块是否上传成功了，传⼊的参数是：Uploader.Chunk 实例、请求响应信息。checkChunkUploadedByResponse函数直接return true的话，不再调用上传接口
headers	Object	额外的请求头。若是函数，则会传入Uploader.File实例、当前块Uploader.Chunk对象以及是否是测试模式	——	{}
oss_target	String	设置oss分片上传地址，此参数只对oss分片上传有效	——

注意：

1、在oss分片上传、普通上传中没有testChunks属性、checkChunkUploadedByResponse函数；

2、在oss分片上传中params参数无效

回调事件

事件(Events)

事件名称	说明	回调参数
fileAdded	文件选择后的回调	file
filesAdded	多文件选择后的回调	files, fileList, newArr
fileSuccess	文件上传成功的回调。第⼀个参数 rootFile 就是成功上传的⽂件所属的根 Uploader.File 对象，它应该包含或者等于成功上传⽂件；第⼆个参数 file 就是当前成功的 Uploader.File 对象本⾝；第三个参数就是 message 就是服务端响应内容，永远都是字符串；第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该⽂件的最后⼀个块实例，可以通过访问xhr获得响应状态对象chunk.xhr.status	rootFile, file, response, chunk

// 文件选择后的回调
this.$refs.upload.$on("fileAdded", (file) => {
   console.log("文件已选择", file);
});

// 多文件选择后的回调
this.$refs.upload.$on("filesAdded", (files, fileList, newArr) => {
   console.log('多文件上传', files, fileList, newArr)
})

// 文件上传成功的回调
this.$refs.upload.$on("fileSuccess", (rootFile, file, response, chunk) => {
   console.log("文件上传成功", rootFile, file, response, chunk);
});