vue-simple-uploader分片上传
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言在vue上面使用vue-simple-uploader实现分片上传Github地址:https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader一、安装vue-simple-uploade
·
目录
前言
在vue上面使用vue-simple-uploader实现分片上传
Github地址:https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader
一、安装vue-simple-uploader
npm install vue-simple-uploader --save
main.js初始化vue-simple-uploader
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
二、在app.vue中使用
<template>
<div>
<div>
<uploader
:options="options"
class="uploader-example"
ref="uploader"
style="width: 100%"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>欢迎来到上传录音界面</p>
<uploader-btn>选择视频</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: {},
};
},
mounted() {
this.uploader();
},
methods: {
// 分片上传
uploader() {
this.options = {
target: "http://192.168.0.166:8081/st/fileUpload/chunkUpload",
testChunks: false, //不校验
chunkSize: "10240000",
maxChunkRetries: 3, //最大自动失败重试上传次数
checkChunkUploadedByResponse: function (chunk, message) {
let objMessage = JSON.parse(message);
if (objMessage.skipUpload) {
return true;
}
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0;
},
headers: {
Authorization: sessionStorage.getItem("Authorization"),
},
query: {
id: 1,//封面id
type: 3,//类型状态
},
attrs: {
accept: [".mp4"],
},
};
},
},
};
</script>
<style>
.uploader-example {
width: 100%;
padding: 15px;
margin: 50px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 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>
支持的配置项(options里面的参数):
target
目标上传 URL,可以是字符串也可以是函数,如果是函数的话,则会传入Uploader.File
实例、当前块Uploader.Chunk
以及是否是测试模式,默认值为'/'
。singleFile
单文件上传。覆盖式,如果选择了多个会把之前的取消掉。默认false
。chunkSize
分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小,可见这个 Issue #51,默认1*1024*1024
。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)
事件:
@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, ...)
所有的事件。
更多推荐
已为社区贡献1条内容
所有评论(0)