页面修改

src/components/CommodityMan/materialMan.vue

@@ -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;
@@ -527,15 +556,30 @@
         // })
         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

@@ -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);