一、 vue-simple-uploader
安装
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根组件里就行了,遇到低版本的浏览器不兼容组件的时候才会展示。
请求中的基本参数
- chunkNumber:当前分片
- chunkSize:分片上限大小
- currentChunkSize:当前分片的真实大小
- totalSize:文件总大小
- identifier:唯一标识,可自定义
- filename:文件名
- totalChunks:总分片数量