一、 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>

• 效果图

组件标签的使用

1. 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)	监听各种事件

2. uploader-btn

   点击后能够展示文件选择器的按钮。一般就只使用directory参数

   参数	说明	类型	可选值	默认
   directory	表示当前上传是否是文件夹上传，如果true则只能选择文件夹	boolean	true/false	false
   single	表示是否一次只能选择一个文件，如果false则可以多选	boolean	true/false	false
   attrs	添加到input元素上的额外属性。因为文件上传的本质是一个input文档对象，比如input元素有的accept="image/*"表示只允许图片上传	json object	accept等	{}

3. uploader-drop

   声明该区域允许拖动文件进来后上传

4. 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

5. uploader-file

   不支持 HTML5 File API 的时候会显示。

   一般就写在uploader根组件里就行了，遇到低版本的浏览器不兼容组件的时候才会展示。

请求中的基本参数

• chunkNumber：当前分片

• chunkSize：分片上限大小

• currentChunkSize：当前分片的真实大小

• totalSize：文件总大小

• identifier：唯一标识，可自定义

• filename：文件名

• totalChunks：总分片数量