赞
踩
安装
npm install vue-simple-uploader --save
# 在main.js中
import uploader from 'vue-simple-uploader'
Vue.ues(uploader)
基本使用
<uploader :options="this.options" @file-added="this.fileAdded" @file-error="this.fileError" @file-success="this.fileSuccess" :autoStart="false"> <uploader-unsupport></uploader-unsupport> <uploader-btn class="uploader-btn">点击上传</uploader-btn> <uploader-list> <!--通过slot-scope绑定文件实例--> <div slot-scope="props"> <div v-for="(file,i) in props.fileList" :key="i"> <uploader-file :list="true" :file="file"></uploader-file> </div> </div> </uploader-list> </uploader>
uploader
Props属性
参数 | 说明 | 类型 | 可选值 | 默认 |
---|---|---|---|---|
options | 最重要的配置项,读取配置项后建立上传器 | Object | - | {} |
autoStart | 是否选择后就立即自动上传 | boolean | true/false | true |
fileStatusText | 根据服务端返回的状态码做出反应,默认即可 | Object | - | { success: ‘success’, error: ‘error’, uploading: ‘uploading’, paused: ‘paused’, waiting: ‘waiting’ } |
options配置
参数 | 说明 | 类型 | 可选值 | 默认 |
---|---|---|---|---|
target | 目标上传的url,必填 | String | - | / |
singleFile | 单文件上传,如果设置了true,则选择多个文件的时候,只有最后一个会被上传 | boolean | true/false | false |
chunkSize | 分块,单个数据块的值大小,用于分块上传实现断续重传 | number | - | 1 * 1024 * 10224【1Mb】 |
simultaneousUploads | 并发上传数 | number | - | 3 |
query | 请求url时候携带的其他参数 | json | - | {} |
withCredentials | 标准的CORS请求是不会带上cookie的,如果想要带上需要设置为true | boolean | true/false | false |
uploadMethod | 真正上传的时候使用的 HTTP 方法 | String | GET/POST | POST |
testChunks | 是否测试每个块是否在服务端已经上传了,主要用来实现秒传、跨浏览器上传等 | boolean | true/false | true |
checkChunkUploadedByResponse | 值为一个函数,不可以直接编写函数。是服务器分片校验函数,与上方的testChunks共用,是秒传和断点续传的基础。根据结果返回的响应体参数判断,return true或者false | 函数 | ||
processParams | 直接在options对象中编写名为processParams函数即可。自定义每一次分片传给后台的参数,params是该方法返回的形参,包含分片信息。实际情况根据接口约定调整,返回一个json对象 | 函数 |
Slot事件
name | 说明 |
---|---|
file-added(file) | 添加了一个文件的事件,一般用作文件校验 |
files-added(files, fileList) | 添加了一批文件事件,一般用做一次选择的多个文件进行校验 |
file-success(rootFile, file, message, chunk) | 文件成功上传,第一个参数rootFile是或包含File对象,file是File对象,message是服务端响应内容字符串,chunk是chunk实例,应该是本文件最后一个块实例。chunk.xhr.status就是这个文件上传的响应码 |
file-progress(rootFile, file, chunk) | 一个文件正在上传事件 |
file-removed(file) | 一个文件被移除 |
file-error(rootFile, file, message, chunk) | 文件上传过程出错 |
methods方法
# 我们先给uploader标签指定ref
<uploader :options="options" class="uploader-example" ref="uploader">
# 然后可以从当前vue组件的子组件refs列表里获取uploader组件,uploader组件有个uploader属性表示uploader组件本身
const uploaderInstance = this.$refs.uploader.uploader
# 然后实例.方法就可以使用了
方法 | 说明 |
---|---|
upload() | 开始或者继续上传 |
pause() | 暂停上传 |
resume() | 继续上传 |
progress() | 返回一个0-1的浮点数,表示当前上传进度 |
isUploading() | 返回一个布尔值标示是否还有文件正在上传中 |
cancel() | 文件会被移除掉 |
addFile(file) | 添加一个原生的文件对象到上传列表中 |
removeFile(file) | 从上传列表中移除一个指定的 Uploader.File 实例对象 |
getSize() | 上传文件的总大小 |
timeReamining() | 剩余时间,单位秒;这个是基于平均上传速度计算出来的,如果说上传速度为 0,那么这个值就是 Number.POSITIVE_INFINITY |
on(event, callback) | 监听各种事件 |
uploader-btn
点击后能够展示文件选择器的按钮。一般就只使用directory参数
参数 | 说明 | 类型 | 可选值 | 默认 |
---|---|---|---|---|
directory | 表示当前上传是否是文件夹上传,如果true则只能选择文件夹 | boolean | true/false | false |
single | 表示是否一次只能选择一个文件,如果false则可以多选 | boolean | true/false | false |
attrs | 添加到input元素上的额外属性。因为文件上传的本质是一个input文档对象,比如input元素有的accept="image/*"表示只允许图片上传 | json object | accept等 | {} |
uploader-drop
声明该区域允许拖动文件进来后上传
uploader-list
拉取后的一个文件单位对象,可以展示,拥有自己的很多属性可以展示。
Props属性
参数 | 说明 | 类型 | 可选值 | 默认 |
---|---|---|---|---|
file | file实例本身 | Uploader.File | - | - |
list | 如果在UploaderList使用,设置为true | boolean | true/false | false |
slot插槽(通过file对象能直接的file信息)
参数 | 说明 | 类型 |
---|---|---|
file | 文件实例 | Uploader.File |
list | 是否在 UploaderList 组件中使用 | boolean |
status | 当前状态【success,error,uploading,paused,waiting】 | String |
paused | 是否暂停了 | boolean |
error | 是否出错了 | boolean |
averageSpeed | 平均上传速度,单位字节每秒 | number |
formatedAverageSpeed | 格式化后的平均上传速度类似:3 KB / S | String |
currentSpeed | 当前上传速度 | number |
isComplete | 是否已经上传完成 | boolean |
isUploading | 是否在上传中 | boolean |
size | 文件或者文件夹大小 | number |
formatedSize | 格式化后文件或者文件夹大小,类似:10 KB | number |
uploadedSize | 已经上传大小,单位字节 | number |
progress | 介于 0 到 1 之间的小数,上传进度 | number |
progressStyle | 进度样式,transform 属性,类似:{transform: '-50%'} | String |
progressingClass | 正在上传中的时候值为:uploader-file-progressing | String |
timeRemaining | 预估剩余时间,单位秒 | number |
formatedTimeRemaining | 格式化后剩余时间,类似:3 miniutes | String |
type | 文件类型 | String |
extension | 文件名后缀,小写 | String |
fileCategory | 文件分类,其中之一:folder , document , video , audio , image , unknown | String |
uploader-file
不支持 HTML5 File API 的时候会显示。
一般就写在uploader根组件里就行了,遇到低版本的浏览器不兼容组件的时候才会展示。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。