Skip to content

E
ElectricitySheep
Commit 70a2353a authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 1d0a2d7d
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 49 deletions
src/components/CommodityMan/materialMan.vue
View file @ 70a2353a
......@@ -180,8 +180,8 @@
</div>
</div>
</div>
<video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)">
</video>
<!-- <img :src="coverImageSrc" style="border:1px solid red;" /> -->
</div>
<!-- 新增分组 -->
<el-dialog title="分组管理" :visible.sync="addGroupMsgDig" width="400px">
......@@ -274,13 +274,14 @@
Image: '',
VideoTime: 0,
WithHeight: 0,
PathType:0
PathType: 0
},
pageMsgDig: false,
checkList: [],
checkAllList: [],
checkAll: false,
imgSrc: ""
}
},
created() {
......@@ -294,13 +295,55 @@
},
methods: {
//生成视频封面图
cutPicture(fileUrl) {
var that = this;
var base64Str = "";
var fileName = new Date().getTime() + ".png";
let video = document.createElement("video");
video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'
video.preload = 'metadata'
video.currentTime = 1 //截取的视频第一秒作为图片
video.src = fileUrl
video.setAttribute('crossOrigin', 'anonymous');
video.width = 140;
video.height = 140;
document.body.appendChild(video)
video.onloadeddata = function () {
let canvas = document.createElement('canvas')
canvas.width = 140;
canvas.height = 140;
canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
base64Str = canvas.toDataURL('image/jpeg');
console.log("base64Str", base64Str)
var arr = base64Str.split(','); // 分隔base64编码的头部信息
var mime = arr[0].match(/:(.*?);/)[1]; // 获取MIME类型
var bstr = atob(arr[1]); // Base64解码
var n = bstr.length;
var u8Arr = new Uint8Array(n); // 创建Uint8Array来存放二进制数据
while (n--) {
u8Arr[n] = bstr.charCodeAt(n); // 将每个字节赋值到u8Arr中
}
var newFile = new File([u8Arr], fileName, {
type: mime
}); // 返回新生成的文件对象
//生成封面图
that.UploadFileToTencent(that.FileType().GoodsImg, newFile, res => {
if (res.resultCode == 1) {
that.addpageMsg.Image = res.FileUrl;
that.addPageList();
}
})
}
},
//登录后获取上传配置
getUpConfig(){
getUpConfig() {
this.apipost("/api/MallBase/GetDefaultFileStore", {}, res => {
if(res.data.resultCode == 1){
if (res.data.resultCode == 1) {
var upData = res.data.data;
localStorage.uploadInfo = JSON.stringify(upData);
}else{
} else {
this.Error(res.data.message);
}
})
......@@ -309,7 +352,6 @@
var theTime = parseInt(value); // 秒
var middle = 0; // 分
var hour = 0; // 小时
if (theTime > 60) {
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
......@@ -356,7 +398,7 @@
}
})
},
// 全选
//全选
CheckAllChange(val) {
this.PageList.forEach(item => {
if (val) {
......@@ -366,7 +408,7 @@
}
})
},
// 删除
//删除
DeletePage() {
this.checkList = [];
this.PageList.forEach(item => {
......@@ -437,7 +479,6 @@
this.checkList = [];
}
})
},
// 单个删除
PageSelect(item, index) {
......@@ -488,19 +529,6 @@
}
});
},
beforeAvatarUpload(file) {
this.getTimes(file); //
},
getTimes(file) { //获取时长
var content = file;
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
this.audioDuration = parseInt(audioElement.duration);
this.addpageMsg.VideoTime = this.audioDuration;
});
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
if (res.resultCode == 1) {
......@@ -513,6 +541,7 @@
}
})
},
//上传视频
UploadVideo(file) {
var that = this;
......@@ -525,17 +554,32 @@
// that.$forceUpdate();
// }
// })
this.UploadFileToTencent(this.FileType().Video, file.file, res => {
this.UploadFileToTencent(this.FileType().Video, file.file, res => {
if (res.resultCode == 1) {
if (this.addpageMsg.Type == 2) {
this.addpageMsg.Image = res.FileUrl;
if (that.addpageMsg.Type == 2) {
that.addpageMsg.Image = res.FileUrl;
}
this.addpageMsg.Path = res.FileUrl;
this.addpageMsg.Name = res.FileName;
this.addPageList();
that.addpageMsg.Path = res.FileUrl;
that.addpageMsg.Name = res.FileName;
var base64StrNew = that.cutPicture(res.FileUrl)
//that.addPageList();
}
})
},
beforeAvatarUpload(file) {
this.getTimes(file); //
},
getTimes(file) { //获取时长
var content = file;
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
this.audioDuration = parseInt(audioElement.duration);
this.addpageMsg.VideoTime = this.audioDuration;
});
},
//上传附件doc docx pdf ppt pptx
UploadpdfFile(file) {
var that = this;
......@@ -557,8 +601,8 @@
// 新增素材信息
addPageList() {
var upInfo = JSON.parse(localStorage.uploadInfo);
if(upInfo){
this.addpageMsg.PathType=upInfo.StoreType;
if (upInfo) {
this.addpageMsg.PathType = upInfo.StoreType;
}
this.apipost("/api/product/SetGetMaterialInfo", this.addpageMsg, res => {
if (res.data.resultCode == 1) {
......
src/components/global/Choosevideo.vue
View file @ 70a2353a
......@@ -43,7 +43,7 @@
<div class="material-item material-upload">
<!--UploadVideo-->
<el-upload class="avatar-uploader" action="" accept="video/mp4,video/ogg,video/webm" :show-file-list="false"
:http-request="UploadImage">
:http-request="UploadVideo" :before-upload="beforeAvatarUpload">
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
<i class="el-icon-upload"></i>
</div>
......@@ -53,6 +53,7 @@
placement="top-start">
<div @click="PageSelect(item,index)" :class="selectId==item.Id ? 'selected' :''"
class="el-tooltip item material-item ">
<img :src="getIconLink(item.Image)" class="material-img" style="width: 100px; height: 100px;">
<div class="material-video-info"><i class="el-icon-video-play"></i> <span>{{Time(item.VideoTime)}}</span>
</div>
......@@ -175,12 +176,53 @@
this.GetPageList();
},
methods: {
//生成视频封面图
cutPicture(fileUrl) {
var that = this;
var base64Str = "";
var fileName = new Date().getTime() + ".png";
let video = document.createElement("video");
video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'
video.preload = 'metadata'
video.currentTime = 1 //截取的视频第一秒作为图片
video.src = fileUrl
video.setAttribute('crossOrigin', 'anonymous');
video.width = 140;
video.height = 140;
document.body.appendChild(video)
video.onloadeddata = function () {
let canvas = document.createElement('canvas')
canvas.width = 140;
canvas.height = 140;
canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
base64Str = canvas.toDataURL('image/jpeg');
console.log("base64Str", base64Str)
var arr = base64Str.split(','); // 分隔base64编码的头部信息
var mime = arr[0].match(/:(.*?);/)[1]; // 获取MIME类型
var bstr = atob(arr[1]); // Base64解码
var n = bstr.length;
var u8Arr = new Uint8Array(n); // 创建Uint8Array来存放二进制数据
while (n--) {
u8Arr[n] = bstr.charCodeAt(n); // 将每个字节赋值到u8Arr中
}
var newFile = new File([u8Arr], fileName, {
type: mime
}); // 返回新生成的文件对象
//生成封面图
that.UploadFileToTencent(that.FileType().GoodsImg, newFile, res => {
if (res.resultCode == 1) {
that.addpageMsg.Image = res.FileUrl;
that.addPageList();
}
})
}
},
Time(value) {
var theTime = parseInt(value); // 秒
var middle = 0; // 分
var hour = 0; // 小时
if (theTime > 60) {
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
......@@ -203,16 +245,40 @@
}
return result;
},
beforeAvatarUpload(file) {
this.getTimes(file); //
},
getTimes(file) { //获取时长
var content = file;
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
this.audioDuration = parseInt(audioElement.duration);
this.addpageMsg.VideoTime = this.audioDuration;
});
},
//上传视频
UploadVideo(file) {
var that = this;
this.UploadSelfFile(this.FileType().Video, file.file, res => {
// this.UploadSelfFile(this.FileType().Video, file.file, res => {
// if (res.resultCode == 1) {
// that.addpageMsg.Image = res.VideoCoverImg;
// that.addpageMsg.Path = res.FileUrl;
// that.addpageMsg.Name = res.FileName;
// that.addPageList();
// that.$forceUpdate();
// }
// })
this.UploadFileToTencent(this.FileType().Video, file.file, res => {
if (res.resultCode == 1) {
that.addpageMsg.Image = res.VideoCoverImg;
if (that.addpageMsg.Type == 2) {
that.addpageMsg.Image = res.FileUrl;
}
that.addpageMsg.Path = res.FileUrl;
that.addpageMsg.Name = res.FileName;
that.addPageList();
that.$forceUpdate();
that.cutPicture(res.FileUrl);
//that.addPageList();
}
})
},
......@@ -224,16 +290,7 @@
this.$emit('Selectvideo', this.emitmsg)
this.selectId = -1;
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().Video, file.file, res => {
if (res.resultCode == 1) {
this.addpageMsg.Path = res.FileUrl;
//this.addpageMsg.Image=res.FileUrl+"&preview=true";
this.addpageMsg.Name = res.FileName;
this.addPageList();
}
})
},
// 新增素材信息
addPageList() {
var upInfo = JSON.parse(localStorage.uploadInfo);
......
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