参考https://www.helloweba.net/javascript/632.html
介绍vue-simple-uploader
就是一个基于 simple-uploader.js 和Vue结合做的一个上传组件，自带 UI，可覆盖、自定义。它支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传；可暂停、继续上传；支持秒传；上传队列管理，支持最大并发上传；分片上传；支持进度、预估剩余时间、出错自动重试、重传等操作
可以使用npm安装
npm install vue-simple-uploader --save
// 或者
cnpm install vue-simple-uploader --save // 淘宝镜像安装比较快
使用
首先初始化，在main.js中引入该组件,代码如下:
import Vue from 'vue'
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
在页面上的使用代码如下:
<template>
<uploader :options="options" class="uploader-example">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :attrs="attrs">select images</uploader-btn>
<uploader-btn :directory="true">select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</template>
<script>
export default {
data () {
return {
options: {
target: 'http://localhost:9000/upload',
testChunks: false,
chunkSize: 1024*1024*2, //1MB
simultaneousUploads: 3, //并发上传数
headers: {
'access-token': 'abcd1234'
},
},
attrs: {
accept: 'image/*'
}
}
}
}
</script>
<style>
.uploader-example {
width: 880px;
padding: 15px;
margin: 40px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
</style>
Props
- options {Object}
该组件基于simple-uploader.js封装的vue组件，大多数配置选项可以参照simple-uploader.js。这里将主要常用的配置选项列出来
gitup文档地址https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md
target 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认值为 '/'。
singleFile 单文件上传。覆盖式，如果选择了多个会把之前的取消掉。默认 false。
chunkSize 分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小，可见这个 Issue #51，默认 110241024。
forceChunkSize 是否强制所有的块都是小于等于 chunkSize 的值。默认是 false。
simultaneousUploads 并发上传数，默认 3。
fileParameterName 上传文件时文件的参数名，默认 file。
query 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认为 {}。
headers 额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认 {}。
withCredentials 标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true，默认 false。
method 当上传的时候所使用的是方式，可选 multipart、octet，默认 multipart，参考 multipart vs octet。
testMethod 测试的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk，默认 GET。
uploadMethod 真正上传的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk，默认 POST。
allowDuplicateUploads 如果说一个文件以及上传过了是否还允许再次上传。默认的话如果已经上传了，除非你移除了否则是不会再次重新上传的，所以也就是默认值为 false。
prioritizeFirstAndLastChunk 对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持；默认 false。
testChunks 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
preprocess 可选的函数，每个块在测试以及上传前会被调用，参数就是当前上传块实例 Uploader.Chunk，注意在这个函数中你需要调用当前上传块实例的 preprocessFinished 方法，默认 null。
initFileFn 可选函数用于初始化文件对象，传入的参数就是 Uploader.File 实例。
readFileFn 可选的函数用于原始文件的读取操作，传入的参数就是 Uploader.File 实例、文件类型、开始字节位置 startByte，结束字节位置 endByte、以及当前块 Uploader.Chunk 实例。并且当完成后应该调用当前块实例的readFinished 方法，且带参数-已读取的 bytes。
checkChunkUploadedByResponse 可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了，传入的参数是：Uploader.Chunk 实例以及请求响应信息。这样就没必要上传（测试）所有的块了，具体细节原因参考 Issue #1，使用示例.
generateUniqueIdentifier 可覆盖默认的生成文件唯一标示的函数，默认 null。
maxChunkRetries 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次，默认 0。
chunkRetryInterval 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试，默认 null。
progressCallbacksInterval 进度回调间隔，默认是 500。
speedSmoothingFactor 主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的，默认是 0.1。
successStatuses 认为响应式成功的响应码，默认 [200, 201, 202]。
permanentErrors 认为是出错的响应码，默认 [404, 415, 500, 501]。
initialPaused 初始文件 paused 状态，默认 false。
processResponse 处理请求结果，默认 function (response, cb) { cb(null, response) }。 0.5.2版本后，processResponse 会传入更多参数：(response, cb, Uploader.File, Uploader.Chunk)。
processParams 处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，processParams 会有更多参数：(params, Uploader.File, Uploader.Chunk, isTest)。
- autoStart {Boolean}
默认 true, 是否选择文件后自动开始上传。 - fileStatusText{Object}
{
success: 'success',
error: 'error',
uploading: 'uploading',
paused: 'paused',
waiting: 'waiting'
}
用于转换文件上传状态文本映射对象。
0.6.0 版本之后，fileStatusText 可以设置为一个函数，参数为 (status, response = null)， 第一个 status 为状态，第二个为响应内容，默认 null，示例：
fileStatusText(status, response) {
const statusTextMap = {
uploading: 'uploading',
paused: 'paused',
waiting: 'waiting'
}
if (status === 'success' || status === 'error') {
// 只有status为success或者error的时候可以使用 response
// eg:
// return response data ?
return response.data
} else {
return statusTextMap[status]
}
}
事件
.change(event) input 的 change 事件。
.dragover(event) 拖拽区域的 dragover 事件。
.dragenter(event) 拖拽区域的 dragenter 事件。
.dragleave(event) 拖拽区域的 dragleave 事件。
.fileSuccess(rootFile, file, message, chunk) 一个文件上传成功事件，第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；第二个参数 file 就是当前成功的 Uploader.File 对象本身；第三个参数就是 message 就是服务端响应内容，永远都是字符串；第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是。
.fileComplete(rootFile) 一个根文件（文件夹）成功上传完成。
.fileProgress(rootFile, file, chunk) 一个文件在上传中。
.fileAdded(file, event) 这个事件一般用作文件校验，如果说返回了 false，那么这个文件就会被忽略，不会添加到文件上传列表中。
.filesAdded(files, fileList, event) 和 fileAdded 一样，但是一般用作多个文件的校验。
.filesSubmitted(files, fileList, event) 和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传。
.fileRemoved(file) 一个文件（文件夹）被移除。
.fileRetry(rootFile, file, chunk) 文件重试上传事件。
.fileError(rootFile, file, message, chunk) 上传过程中出错了。
.uploadStart() 已经开始上传了。
.complete() 上传完毕。
.catchAll(event, ...) 所有的事件。
重点说几个事件:
fileAdded(file)：添加了一个文件事件，一般用做文件校验，比如要校验文件md5时，先触发该事件。
fileSuccess(rootFile, file, message, chunk)：一个文件上传成功事件，第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；第二个参数 file 就是当前成功的 Uploader.File 对象本身；第三个参数就是 message 就是服务端响应内容，永远都是字符串；第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是
fileError(rootFile, file, message, chunk)：上传过程中出错了。
fileProgress(rootFile, file, chunk)：一个文件在上传中。
注意：所有的事件都会通过 lodash.kebabCase 做转换，例如 fileSuccess 就会变成 file-success。
方法
.getRoot() 得到当前文件所属的根文件，这个根文件就是包含在 uploader.fileList 中的.
.progress() 返回一个 0 到 1 的数字，代表当前上传进度。
.pause() 暂停上窜文件。
.resume() 继续上传文件。
.cancel() 取消上传且从文件列表中移除。
.retry() 重新上传文件。
.bootstrap() 重新初始化 Uploader.File 对象的状态，包括重新分块，重新创建新的 XMLHttpRequest 实例。
.isUploading() 文件是否扔在上传中。
.isComplete() 文件是否已经上传完成。
.sizeUploaded() 已经上传大小。
.timeRemaining() 剩余时间，基于平均速度的，如果说平均速度为 0，那么值就是 Number.POSITIVE_INFINITY。
.getExtension() 得到小写的后缀。
.getType() 得到文件类型。
获取Uploader实例
可以通过如下方式获得：
mounted () {
this.$nextTick(() => {
window.uploader = this.$refs.uploader.uploader
})
}
//实例调用：
uploader.cancel()