效果图
前言
使用原生Input上传大文件(视频)页面会卡死,所以决定使用Element-ui的Upload组件完成。
<el-upload class="upload-demo" v-if="!pageStatue" :multiple="true" name="1" :http-request="Upload1" action="文件路径" :show-file-list="false">
<!-- 这里使用 :http-request 自定义上传方法 -->
<span class="icon iconfont icon-weibiaoti-_shangchuan upload_icon"></span>
</el-upload>
复制代码
正文
// 自定义上传
Upload1(file,num) {
this.filename = file.filename;
// 验证
let files= file.file;
let fileName=files.name;
let fileSize=files.size;
let fileType=files.type;
var file_type= fileName.split('.').pop();
file_type = file_type.toLowerCase();
if(file_type == 'png' || file_type == 'jpg' || file_type == 'jpeg'){
}else {
alert('只能上传jpg、png、jpeg');
return false;
}
let pro = new Promise((resolve, rej) => {
//获取签名
axios.get(baseURL + "/sys/newOss/findSing").then( (res) => {
resolve(res.data);
})
});
pro.then( success => {
// 第一次上传
if(num != 2) {
// 保存上传的文件
this.imgactiveList1.push(file);
// 当前上传的进度文件
this.imgactiveList.push({
imgName :file.file.name,
videoUploadPercent: 0, //进度数字
type: "imgList" //页面为多个上传,作为上传后Push进那个数组
})
}
if(this.imgactiveList1.length == 1 ) {
// 第一次上传调用
this.fileUpload(success,file,file.filename);
return false;
}
// 判断第二次调用时 是否是undefined
if(this.imgactiveList1[this.imgactiveNum] == undefined) {
return false;
}
// 第二次、第N次上传
if(this.imgList.length >= 1 || this.imgactiveList.length == 1) {
this.fileUpload(success,this.imgactiveList1[this.imgactiveNum],file.filename);
}
})
}
复制代码
fileUpload(success,file,filename) {
var json = success;
var ossData = new FormData();
var date = new Date();
var s = date.getTime();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
// 添加配置参数
ossData.append('OSSAccessKeyId', json.accessid);
ossData.append('policy', json.policy);
ossData.append('Signature', json.signature);
ossData.append(
"key",
json.dir + "/" + y + "/" + m + "/" + d + "/" + s +'.'+file.file.name.split('.').pop()
);
ossData.append('success_action_status', 201); // 指定返回的状态码
ossData.append('file', file.file, file.file.name);
this.xhr.open("post", json.host, true);
//调用方法监听上传进度
this.xhr.upload.addEventListener(
"progress",
this.progressFunction,
false
);
this.xhr.onload = (data) => {
var data = this.toXmlDom(data.currentTarget.response)
if ($(data).find('PostResponse')) {
var res = $(data).find('PostResponse');
this.imgactiveList.splice(0,1)
if(this.imgactiveNum >= this.imgactiveList1.length ) {
this.imgactiveNum = 0;
return false;
}
if(this.imgactiveList1[this.imgactiveNum].filename == "1") {
this.imgList.push({
fileName: file.file.name,
fileUrl: res.find('Location').text()
})
if(this.imgactiveList1.length > 1) {
this.Upload1(this.imgactiveList1[this.imgactiveNum],2);
}
}
this.imgactiveNum ++;
}
this.$message({
type: "success",
message: "上传完成"
});
this.videoFlag = false;
};
this.xhr.send(ossData);
}
复制代码
// 进度条
progressFunction(event) {
// 设置进度显示
if (event.lengthComputable) {
var percent = Math.floor(event.loaded / event.total * 100);
if (percent >= 100) {
percent = 97;
}
this.videoUploadPercent = percent;
this.imgactiveList[0].videoUploadPercent = percent;
}
this.videoFlag = true;
}
复制代码
// xml转换
toXmlDom(source) {
var xmlDoc = null;
if (window.ActiveXObject) {
var ARR_ACTIVEX = ["MSXML4.DOMDocument", "MSXML3.DOMDocument", "MSXML2.DOMDocument", "MSXML.DOMDocument", "Microsoft.XmlDom"];
var XmlDomflag = false;
for (var i = 0; i < ARR_ACTIVEX.length && !XmlDomflag; i++) {
try {
var objXML = new ActiveXObject(ARR_ACTIVEX[i]);
xmlDoc = objXML;
XmlDomflag = true;
} catch (e) {
}
}
if (xmlDoc) {
xmlDoc.async = false;
xmlDoc.loadXML(source);
}
} else {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(source, "text/xml");
}
return xmlDoc;
}
复制代码