Skip to content

X
xxx_phase2_web
Commit 95a6cf16 authored by 以墨为白's avatar 以墨为白 🎧
Browse files
Options

bigfileupload事件利用

parent fcebe14c
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 47 deletions
src/components/common/bigfileUpload.vue
View file @ 95a6cf16
......@@ -7,8 +7,9 @@
<ul>
<li v-for="(item, index) in fileList ">
<a @click="removeFile(item, index)"><span title="点击移除">{{ item.name }}</span></a>
<span style="color: white;"
:class="[item.state == 1 ? 'el-icon-loading' : item.state == 2 ? 'el-icon-check' : '']"></span>
<span
:class="[item.state == 1 ? 'el-icon-loading' : item.state == 2 ? 'el-icon-success' : item.state == 3 ? 'el-icon-warning' : '']">{{
item.stateText }}</span>
<el-progress :text-inside="true" :stroke-width="14" :percentage="item.percentage"
status="success"></el-progress>
</li>
......@@ -51,7 +52,6 @@ export default {
{
//时间点1:所有分块进行上存之前触发该方法,即当每个文件开始上传第一个分块前就调用该方法
beforeSendFile: function (file) {
_self.fileList.filter(e => e.id == file.id)[0].state = 1;
//定义一个异步对象
var deferred = WebUploader.Deferred();
uploader
......@@ -72,18 +72,24 @@ export default {
fileMd5: val,
},
success: function (data) {
var resultCode = data.data;
// 文件已经上传过,忽略上传过程，直接标识上传成功；
if (resultCode === -1) {
uploader.skipFile(file);
file.pass = true;
_self.getProgressBar(file, 1);
if (data.code == 9000) {
var resultCode = data.data;
// 文件已经上传过,忽略上传过程，直接标识上传成功；
if (resultCode === -1) {
uploader.skipFile(file);
file.pass = true;
_self.getProgressBar(file, 1);
} else {
//文件没有上传过，下标为0 文件上传中断过，返回当前已经上传到的下标
file.indexcode = resultCode;
}
} else {
//文件没有上传过，下标为0 文件上传中断过，返回当前已经上传到的下标
file.indexcode = resultCode;
deferred.reject(data.message);//触发error事件
}
},
error: function () { },
error: function (XMLHttpRequest, textStatus, errorThrown) {
deferred.reject(textStatus);//触发error事件
},
});
//获取文件信息后进入下一步
deferred.resolve();
......@@ -113,21 +119,8 @@ export default {
//时间点3:一个文件的所有分片上传成功后，调用该方法,让后台合并所有分片
//该方法的在uploader.on("success")方法前执行。
afterSendFile: function (file) {
let param = {
success: file.pass,
md5: file.md5,
file: {
name: file.name,
size: file.size,
type: file.ext,
uuid: file.uid + "." + file.ext,
}
};
if (file.pass) {//文件已经存在
_self.$emit("Completed", param);
_self.fileList.filter(e => e.id == file.id)[0].state = 2;
_self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
} else { //如果所有分块上传成功，则通知后台合并分块
var deferred = WebUploader.Deferred();
if (!file.pass) {//文件不存在
$.ajax({
type: "POST",
url: "api/rest/file/bigFile/merge",
......@@ -138,12 +131,13 @@ export default {
fileType: _self.fileType
},
success: function (data) {
_self.fileList.filter(e => e.id == file.id)[0].state = 2;
_self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
param.success = data.code == 9000;
_self.$emit("Completed", param);
if (data.code != 9000) {//触发error事件
deferred.reject(data.message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
deferred.reject(textStatus);
},
error: function () { },
});
}
},
......@@ -172,10 +166,6 @@ export default {
fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
});
// 当有文件被添加进队列的时候触发
uploader.on("fileQueued", function (file) {
_self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
});
/**
* 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
*/
......@@ -187,6 +177,15 @@ export default {
//增加请求token
$.extend(headers, headers_target);
};
// 当有文件被添加进队列的时候触发
uploader.on("fileQueued", function (file) {
_self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
});
//单个文件开始上传
uploader.on("uploadStart", (file) => {
_self.fileList.filter(e => e.id == file.id)[0].state = 1;
console.log("uploadStart");
});
/**
* 上传过程中，一直会执行该方法
*/
......@@ -196,16 +195,38 @@ export default {
/**
* 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
*/
uploader.on("uploadSuccess", (file) => { });
uploader.on("uploadSuccess", (file, response) => {
_self.fileList.filter(e => e.id == file.id)[0].state = 2;
_self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
let param = {
md5: file.md5,
file: {
name: file.name,
size: file.size,
type: file.ext,
uuid: file.uid + "." + file.ext,
}
};
_self.$emit("Success", param);
console.log("uploadSuccess");
});
/**
* 发生错误时
*/
uploader.on("uploadError", function (file) { });
uploader.on("uploadError", function (file, reason) {
_self.fileList.filter(e => e.id == file.id)[0].state = 3;
_self.fileList.filter(e => e.id == file.id)[0].stateText = reason;
console.log("uploadError");
});
/**
* 不管所有分片发送成功或者失败都会执行该方法
*/
uploader.on("uploadComplete", function (file) {
console.log("uploadComplete");
});
//所有文件上传结束
uploader.on("uploadFinished", () => {
console.log("uploadFinished");
});
//设置全局变量
this.uploader = uploader;
......@@ -252,7 +273,7 @@ export default {
#thelist a {
// text-decoration: underline;
cursor: pointer;
font-size: 14px;
font-size: 16px;
color: white;
}
......@@ -276,4 +297,17 @@ export default {
.startUpload {
margin-top: 5px;
}
.el-icon-loading {
color: white;
}
.el-icon-warning {
color: red;
font-size: 11px;
}
.el-icon-success {
color: green
}
</style>
src/view/sjgl/wxk_public.vue
View file @ 95a6cf16
......@@ -265,7 +265,7 @@
</el-dialog>
<el-dialog title="大文件上传" :visible.sync="centerDialogVisible_bigFile" width="30%" center class="xzwd">
<BigfileUpload @Completed="completeUploadBigFile"></BigfileUpload>
<BigfileUpload @Success="completeUploadBigFile"></BigfileUpload>
</el-dialog>
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
......@@ -649,12 +649,6 @@ export default {
},
completeUploadBigFile(evt) {
if (!evt.success) {
this.$message({
type: "warning",
message: "上传失败!",
});
}
let fd = new FormData();
let fileInfo = {
createId: this.$store.getters.userInfo.account,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment