|
|
@@ -54,12 +54,15 @@
|
|
|
progress:0, //进度条
|
|
|
ktProgress:0, //抠图进度条
|
|
|
showPersonView:false, //是否显示个人形象提示弹窗
|
|
|
+ showPopView:false, //是否显示确认取消框
|
|
|
uploadStatus:0, //视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
|
|
|
count:0, //结果请求次数
|
|
|
timeOut:90000, //超时时间
|
|
|
outTimer:null, //延时处理对象
|
|
|
timer:null, //轮询对象
|
|
|
widthHeight:'', //用户上传视频尺寸
|
|
|
+ stopFlag:false, //停止上传动作
|
|
|
+ cancelTokenSource:null, //取消上传的操作对象
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -119,7 +122,6 @@
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
tabChange(index) {
|
|
|
if (this.tabIndex == index) {
|
|
|
return false;
|
|
|
@@ -159,9 +161,12 @@
|
|
|
this.uploadStatus = 0;//处理完毕
|
|
|
},
|
|
|
uploadImgObj(e,form,type=1){
|
|
|
+ this.stopFlag = false;//上传开始时，开启上传
|
|
|
if(type==2){
|
|
|
this.initStatus();//重置上传状态到初始值
|
|
|
}
|
|
|
+ this.uploadStatus = 0;
|
|
|
+ this.peopleIndex = 0; //选中第一个
|
|
|
//上传图片
|
|
|
var file = e.target.files[0];
|
|
|
var fileSize = file.size / 1024 / 1024;
|
|
|
@@ -192,7 +197,7 @@
|
|
|
let height = video.videoHeight;
|
|
|
// this.videoWidth = width;
|
|
|
// this.videoHeight = height;
|
|
|
- console.warn('视频时长：', duration);
|
|
|
+ console.warn('视频时长：', duration,this.stopFlag);
|
|
|
console.warn('视频尺寸：x:', width, 'y:', height);
|
|
|
if (duration > 20) {
|
|
|
this.$message.warning('您的上传的视频过长，请低于20s');
|
|
|
@@ -200,43 +205,94 @@
|
|
|
videoForm && videoForm.reset(); // 重置表单
|
|
|
return false
|
|
|
}else{
|
|
|
- var item = {};
|
|
|
- item.file = file;
|
|
|
- console.warn("***uploadImgObj***",file)
|
|
|
- this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
+ if(!this.stopFlag){
|
|
|
+ var item = {};
|
|
|
+ item.file = file;
|
|
|
+ console.warn("***uploadImgObj***",file)
|
|
|
+ this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
video.src = event.target.result;
|
|
|
};
|
|
|
reader.readAsDataURL(file);
|
|
|
- // var item = {};
|
|
|
- // item.file = file;
|
|
|
- // console.warn("***uploadImgObj***",file)
|
|
|
- // this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
},
|
|
|
//视频上传进度处理
|
|
|
uploadProgress(e){
|
|
|
this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
|
|
|
console.warn("***uploadProgress***",this.progress)
|
|
|
},
|
|
|
+ //显示弹窗提示框
|
|
|
+ showPopViewHandle(){
|
|
|
+ this.showPopView = true;//弹出确认框；
|
|
|
+ },
|
|
|
+ //取消上传
|
|
|
+ cancel(cancelTokenSource){
|
|
|
+ this.cancelTokenSource = cancelTokenSource;
|
|
|
+ console.warn("***取消上传函数定义***")
|
|
|
+ },
|
|
|
//停止上传
|
|
|
stopUpload(){
|
|
|
-
|
|
|
+ this.showPopView = false;//弹出确认框；
|
|
|
+ this.stopFlag = true;//停止上传标志打开
|
|
|
+ if(this.uploadStatus == 1){
|
|
|
+ this.cancelTokenSource.cancel('上传已取消');//通知取消上传
|
|
|
+ }
|
|
|
+ else if(this.uploadStatus==2 || this.uploadStatus==3){//绿幕抠图中 或者已经完成
|
|
|
+ let data = {
|
|
|
+ userId:this.userId,
|
|
|
+ brandId: $config.brandId,
|
|
|
+ processStatus:'canceled',
|
|
|
+ virtualNo:this.videoId,
|
|
|
+ }
|
|
|
+ requestConfig('addUserVirtural', data);//停止该绿幕视频的使用
|
|
|
+ this.initStatus();//还原初始状态
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
|
|
|
+ value:'个人形象',
|
|
|
+ width:'',
|
|
|
+ height:'',
|
|
|
+ }
|
|
|
+ this.aiPeopleChange(data, 'canel')
|
|
|
+ this.peopleIndex = -1;
|
|
|
+ },
|
|
|
+ //获取用户上传的个人形象
|
|
|
+ async getUserVirtural() {
|
|
|
+ let data = {
|
|
|
+ userId:this.userId,
|
|
|
+ brandId: $config.brandId,
|
|
|
+ processStatus:'completed',
|
|
|
+ }
|
|
|
+ let res = await requestConfig('getUserVirtural', data);//停止该绿幕视频的使用
|
|
|
+ if (res.success && res.list && res.list[0]) {
|
|
|
+ let data = res.list[res.list.length - 1];//获取最新的一个用户的个人形象数据
|
|
|
+ this.leftList[0].icon = data.virtualBg;
|
|
|
+ this.leftList[0].url = data.virtualUrl;
|
|
|
+ this.videoUrl = data.virtualUrl;
|
|
|
+ if(data.widthHeight){
|
|
|
+ this.leftList[0].width = data.widthHeight.split('x')[0];
|
|
|
+ this.leftList[0].height = data.widthHeight.split('x')[1];
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
async uploadMaterielFile(item, form) {
|
|
|
+ if(this.stopFlag){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
var self = this;
|
|
|
let formData = new FormData();
|
|
|
formData.append('file', item.file);
|
|
|
formData.append('brandId', $config.brandId);
|
|
|
formData.append('userId', this.userId);
|
|
|
- // formData.append('width', this.videoWidth);
|
|
|
- // formData.append('height', this.videoHeight);
|
|
|
- console.warn("***formData***",formData);
|
|
|
+ console.warn("***uploadMaterielFile***");
|
|
|
this.uploadStatus = 1;//上传中
|
|
|
this.showPersonView = false;
|
|
|
this.addSilhouette();//添加剪影视频
|
|
|
- let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress)
|
|
|
- if (res.success && res.single) {
|
|
|
+ let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress,this.cancel)
|
|
|
+ if (axios.isCancel(res)) {//取消上传处理
|
|
|
+ this.initStatus();//还原初始状态
|
|
|
+ }else if (res.success && res.single) {
|
|
|
this.videoId = res.single;//根据Id查询结果
|
|
|
this.startInterval();//开始轮询获取结果
|
|
|
}
|
|
|
@@ -244,6 +300,9 @@
|
|
|
videoForm && videoForm.reset(); // 重置表单
|
|
|
},
|
|
|
async getVideoUrl() {
|
|
|
+ if(this.stopFlag){
|
|
|
+ this.stopInterval();
|
|
|
+ }
|
|
|
if(!this.videoId){
|
|
|
Toast({
|
|
|
message: '请先上传视频',
|
|
|
@@ -252,6 +311,9 @@
|
|
|
}
|
|
|
this.count = this.count + 1;
|
|
|
let res = await requestConfig('get_result', {id:this.videoId,userId:this.userId}, true, false,'get')
|
|
|
+ if(this.stopFlag){
|
|
|
+ this.stopInterval();
|
|
|
+ }
|
|
|
if (res.success && res.single) {
|
|
|
this.resultHandle(res.single)
|
|
|
}else{
|
|
|
@@ -293,6 +355,8 @@
|
|
|
this.widthHeight = single.widthHeight; //"856x480"
|
|
|
this.leftList[0].icon = single.virtualBg;
|
|
|
this.leftList[0].url = this.videoUrl;
|
|
|
+ this.leftList[0].width = single.widthHeight.split('x')[0],
|
|
|
+ this.leftList[0].height = single.widthHeight.split('x')[1],
|
|
|
this.uploadStatus = 3;//处理完毕
|
|
|
this.stopInterval();//停止轮询
|
|
|
this.addRealVideo();
|
|
|
@@ -363,8 +427,7 @@
|
|
|
clearTimeout(this.outTimer)
|
|
|
this.outTimer = null
|
|
|
}
|
|
|
- this.myloading = false;
|
|
|
- this.aiFlag = false;
|
|
|
+ // this.uploadStatus = 0;//回到初始上传状态
|
|
|
},
|
|
|
|
|
|
showMask(){
|
|
|
@@ -438,8 +501,11 @@
|
|
|
userUpload:true,
|
|
|
value:'',
|
|
|
url:'',
|
|
|
+ width:'',
|
|
|
+ height:'',
|
|
|
})
|
|
|
this.leftList = this.leftList.concat(list);
|
|
|
+ this.getUserVirtural();
|
|
|
} else if (type == 1) {
|
|
|
this.rightList = list;
|
|
|
} else if (type == 3) {
|
|
|
@@ -485,6 +551,12 @@
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
+ if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
|
|
|
+ Toast({
|
|
|
+ message: '请在个人形象上传完成后发布！',
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
let param = {
|
|
|
type: 'CLK', //埋点类型
|
|
|
clkId: 'clk_2cmina_23121301', //点击ID
|
zjs_project