wbb-shard-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 | 当前块的大小,实际大小 |
使用
引用
<shard-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: this.fileSize
}
})
上传文件夹: 调用this.$refs.upload.$emit('openUploaderFolder')
示例:
this.$refs.upload.$emit('openUploaderFolder', {
params: {
otherParams: "home"
},
options: {
target: '/api/file/upload',
accept: ['.mp3', '.flac', '.mp4', '.flv'],
fileSize: this.fileSize
}
})
属性(Attributes)
参数名称 | 类型 | 说明 | 可选值 | 默认值 |
---|
params | Object | 传给服务端的额外参数 | —— |
options | Object | 上传选项,目前支持 target、accept | —— | 具体配置如下: |
options对象的配置参数
参数名称 | 类型 | 说明 | 可选值 | 默认值 |
---|
target | String | 设置上传地址 | —— |
accept | Array | 设置上传类型 | —— |
fileSize | Number | 文件大小(与服务端的大小保持一致即可) | —— | 1G |
回调事件
事件(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);
});