wbb-uploader-ui

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

使用

分片上传-本地组件

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

引用

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

Vue.use(WbbShardUploader)

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

分片上传-oss组件

文件信息上传到oss服务器

引用

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

Vue.use(WbbOssShardUploader)

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

普通上传-本地组件

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

引用

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

Vue.use(WbbGeneralUploader)

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

普通上传-oss组件

文件信息上传到oss服务器

引用

import WbbOssGeneralUploader from "wbb-uploader-ui"
import 'wbb-uploader-ui/lib/wbb-uploader-ui.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);
});