vue自定义封装大文件分片上传组件，带上传进度条显示，断点续传，视频播放器组件，原生JS的AJAX封装，Promise异步变同步
说明：
请求用了自定义封装的原生js的ajax请求和axios
视频播放用了vue-video-player插件
文件的md5编码用了sparkmd5.js
读取二进制文件用的客户端自带的FileReader接口
封装的分片上传和断点续传组件：
<template>
<div class="biguploadfile">
<div class="videoBox">
<div class="progressBox" v-if="showProgress">
<span class="progressItem" ref="progressItem"></span>
</div>
<videoPlay :src="fileBaseUrl+src" poster='' v-if="showVideo && !pauseStatus && !showProgress"></videoPlay>
</div>
<input type="file" class="bigFile" @change="computedSliceMd5" ref="file" name="file">
<div class="btns">
<Button type="primary" v-if="!pauseStatus" @click="toUpload">上传</Button>
<Button type="default" v-if="pauseStatus" @click="pauseUpload">取消</Button>
</div>
</div>
</template>
<script>
import SparkMD5 from "spark-md5"; //获取二进制文件md5编码
import videoPlay from "@/components/videoPlayer"; //利用vue-video-player插件封装的播放器
import Ajax from "@/plugins/ajax.js"; //封装的原生JS ajax请求
import api from "@/api/commonApi.js"; //本地用的接口
import code from "@/config/base.js"; //这是项目中自定义的参数
export default {
data() {
return {
showVideo: false,
blobSlice: null,
file: null,
identifier: null,
chunkSize: 1024000,
chunks: 0,
currentChunk: 0,
spark: null,
fileReader: null,
tmpDataList: [],
formDataList: [],
uploadedList: [],
start: 0,
end: 0,
headers: {},
urlCode: code.urlCode.lectureDemand,
xhr: null,
pauseStatus: false,
showProgress: false,
percent: 0
};
},
props: {
src: { //利用props将上传的视频地址传回来，用于预览
type: String,
default: ""
}
},
components: { videoPlay }, //播放器组件
methods: {
pauseUpload() { //取消上传
this.xhr.abort();
this.xhr = null;
},
toUpload() { //调用上传接口
this.$refs.file.click();
},
checkMd5() { //断点续传需要用的方法，断点续传获取到的是已经上传过去的分片编号，已经上传过的分片直接跳过去
this.showProgress = true;
this.$axios
.post(api.lecturedemanduploadfilemd5, { md5: this.identifier })
.then(resp => {
if (resp.data.object.code == 2) {
let tmpIdsList = resp.data.object.ids;
tmpIdsList.map((el,index) => {
tmpIdsList[index] = parseInt(el);
});
this.uploadedList = tmpIdsList;
}
this.showVideo = false;
this.pauseStatus = true;
this.uploadFile(
1,
this.formDataList,
this.uploadedList,
this.chunks
);
})
.catch(err => {
this.initParam(0, "断点续传检查失败，请重试");
});
},
computedSliceMd5() { //获取文件的md5编码
this.file = this.$refs.file.files[0];
this.chunks = Math.ceil(this.file.size / this.chunkSize);
this.fileReader.onload = e => {
this.spark.append(e.target.result); // Append array buffer
this.currentChunk++;
if (this.currentChunk < this.chunks) {
this.loadNext();
} else {
this.identifier = this.spark.end(); //文件的MD5身份标识
this.tmpDataList.map((el, i) => {
let formData = new FormData();
formData.append("filename", this.file.name);
formData.append("relativePath", this.file.name);
formData.append("totalSize", this.file.size);
formData.append("chunkSize", this.chunkSize);
formData.append("identifier", this.identifier);
formData.append("totalChunks", this.chunks);
formData.append("file", el.file);
formData.append("currentChunkSize", el.currentSize);
formData.append("chunkNumber", el.currentNum + 1);
formData.append("urlCode", this.urlCode);
this.formDataList.push(formData);
});
this.checkMd5();
}
};
this.fileReader.onerror = function() {
this.$Message.error("读取文件出错，请重试");
};
this.loadNext();
},
loadNext() { //文件切片
(this.start = this.currentChunk * this.chunkSize),
(this.end =
this.start + this.chunkSize >= this.file.size
? this.file.size
: this.start + this.chunkSize);
let pieceFile = this.blobSlice.call(
this.file,
this.start,
this.end
);
pieceFile.name = this.file.name;
let tmpObj = {
file: pieceFile,
currentSize: this.end - this.start,
currentNum: this.currentChunk
};
this.tmpDataList.push(tmpObj);
this.fileReader.readAsArrayBuffer(pieceFile);
},
uploadFile(n, dataList, uploadedList, chunks) { //利用promise异步变同步上传
console.log("uploadedList",uploadedList);
let status = uploadedList.indexOf(n) == -1 ? true : false;
console.log("status",status);
let key = n - 1;
if (status) {
new Promise((resolve, reject) => {
Ajax(
resolve,
reject,
"post",
api.lecturedemanduploadfile,
this.headers,
dataList[key],
this.xhrReturn,
this.getProgress
);
})
.then(resp => {
if(resp.code == "401"){
this.$router.push({path:"/login"});
return ;
}
if (resp.object.uploadStatus == 1) {
let tmpUrl = JSON.parse(resp.object.fileUrl)[0]
.fileName;
this.$emit("getUrl", tmpUrl);
this.success();
} else {
this.uploadFile(
n + 1,
this.formDataList,
this.uploadedList,
this.chunks
);
}
})
.catch(err => {
this.initParam(0, "上传失败");
});
}else{
this.percent += Math.floor(100/this.chunks);
this.changeProgress(1);
this.uploadFile(
n + 1,
this.formDataList,
this.uploadedList,
this.chunks
);
}
},
getProgress(evt) { //ajax进度条回调方法
if (evt.lengthComputable) {
this.percent += Math.floor(
(evt.loaded * 100) / this.chunks / evt.total
);
if(this.percent>=99){
this.percent = 99;
}
this.changeProgress(1);
} else {
this.changeProgress(0);
}
},
changeProgress(type) { //进度条展示
if (type) {
this.$refs.progressItem.innerHTML =
this.percent.toFixed(2) + "%";
this.$refs.progressItem.style.width =
this.percent.toFixed(2) + "%";
} else {
this.$refs.progressItem.innerHTML = "上传失败";
}
},
success() { //成功回调
this.percent = 100;
this.changeProgress(1);
setTimeout(() => {
this.initParam(1, "上传成功");
}, 500);
},
failed(err) { //失败回调
this.initParam(0, err);
},
initParam(type, msg) { //成功或失败之后的初始化
this.percent = 0;
this.pauseStatus = false;
this.showProgress = false;
this.file = null;
this.identifier = null;
this.chunks = 0;
this.currentChunk = 0;
this.tmpDataList = [];
this.formDataList = [];
this.uploadedList = [];
this.start = 0;
this.end = 0;
this.$refs.file.value = "";
if (type == 1) {
this.showVideo = true;
this.$Message.success(msg);
} else {
this.showVideo = false;
this.$Message.error(msg);
}
},
xhrReturn(xhr) {
this.xhr = xhr;
}
},
created() { //一些变量的初始化
if (Boolean(this.src)) {
this.showVideo = true;
}
this.blobSlice =
window.File.prototype.slice ||
window.File.prototype.mozSlice ||
window.File.prototype.webkitSlice;
this.spark = new SparkMD5.ArrayBuffer();
this.fileReader = new FileReader();
this.percent = 0;
}
};
</script>
<style lang="less" scoped>
.biguploadfile {
display: inline-block;
.bigFile {
display: none;
}
.progressBox {
display: inline-block;
width: 200px;
height: 20px;
background-color: gray;
vertical-align: middle;
}
.progressItem {
display: inline-block;
height: 20px;
background-color: #2d8cf0;
font-weight: bold;
color:#ffffff;
}
.btns {
display: inline-block;
vertical-align: middle;
}
.videoBox {
display: inline-block;
vertical-align: middle;
}
}
</style>
可参考的自定义封装的Ajax
function getXhr(){
let xhr=null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
//为了兼容IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
export default function Ajax(resolve,reject,type, url, headers, data, xhrReturn=()=>{}, progress=()=>{}){ //参数可封装成对象形式的，用着方便，这里就不改了
/*
ajax暂停之后不能重新发送请求，需要创建新的xhr对象重新发送请求
*/
let xhr = getXhr();
xhrReturn(xhr);//将xhr对象返回，用于取消上传
type = type.toUpperCase();
let reg = new RegExp('\\?',"g");
if(reg.test(url)){
reject("url地址传递错误");
return ;
}
let random = Math.random();
url += "?"+random;
if(type == 'GET'){
reject("不支持GET提交方式");
} else if(type == 'POST'){
xhr.open('POST', url, true);
if(typeof headers == 'object'){
for(let key in headers){
// 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader(key, headers[key]);
}
}else{
reject("请求头设置有误");
return ;
}
xhr.withCredentials = false;
xhr.upload.onprogress = progress;
xhr.onabort = ()=>{
xhr = null;
};
xhr.send(data);
}
// 处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
let resp = JSON.parse(xhr.responseText);
resolve(resp);
} else {
reject("提交失败，请重试");
}
}
}
}
可参考的videoPlayer组件
<template>
<div class="container">
<div class="video-box" :style="videoStyle">
<video-player
class="video-player vjs-custom-skin video-viewport"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
></video-player>
</div>
</div>
</template>
<script>
import cookie from "./../utils/cookie.js";
import api from "@/api/commonApi";
export default {
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0, 6.0, 12.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在
language: "zh-CN",
aspectRatio: "4:3", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
type: "video/mp4",
src: "" //你的视频地址（必填）
}
],
poster: "", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
};
},
props: {
src: {
type:String,
default: ""
},
poster: {
type:String,
default: "./static/img/heicon.jpg"
},
videoStyle:{
type:Object,
default:()=>{
return { width: "400px", height: "300px" };
}
}
},
methods: {
onPlayerPlay(player) {
console.log("触发播放");
},
onPlayerPause(player) {
console.log("触发暂停");
}
},
computed: {
player() {//暂时没用到
return this.$refs.videoPlayer.player;
}
},
mounted() {
this.playerOptions.sources[0].src = this.src;
this.playerOptions.poster = this.poster;
}
};
</script>
<style lang="less" scoped>
.container {
display:inline-block;
.video-box {
.video-viewport {
width: 100%;
height: 100%;
}
}
}
</style>
调用：
<template>
<div>
<!-- 用props将上传的视频地址传递过去，还有一个方法 -->
<bigUploadFile :src="src" @getUrl="getUploadUrl"></bigUploadFile>
</div>
</template>
<script>
import bigUploadFile from "@/components/bigUploadFile";
export default {
data() {
return {
src: ""
};
},
created() {},
components: {
bigUploadFile
},
methods: {
//获取上传的url
getUploadUrl(url) {
console.log("传递过来的url", url);
this.src = url;
}
}
};
</script>
<style lang="less">
</style>