截取视频第一帧不可用

src/views/articleManagement/videoCreate.vue

@@ -132,6 +132,17 @@
     <div class="common-card a-card-margin-top">
       <div class="information-title">视频内容</div>
       <div style="margin-bottom: 10px">上传视频</div>
+      <!-- 截取视频第一帧用（太模糊了） -->
+      <!-- <video
+        v-if="defaultVideoFileList[0]"
+        :src="defaultVideoFileList[0].url"
+        width="400"
+        height="300"
+        crossOrigin="anonymous"
+        controls="controls"
+        id="videofile"
+      ></video>
+      <div id="output"></div> -->
       <div style="margin-bottom: 10px">
         <a-upload
           :customRequest="uploadOssVideoFile"
@@ -508,6 +519,8 @@ export default {
       });
     },
     async uploadOssVideoFile(fileData) {
+      console.log("-------fileData--------");
+      console.log(fileData);
       let that = this;
       let file = fileData.file;
 
@@ -547,20 +560,13 @@ export default {
           };
           that.videoUrl = res.url;
           that.defaultVideoFileList.push(upFile);
+        //   this.findvideocover(file);
           fileData.onSuccess();
         });
       } catch (e) {
         fileData.onError();
         console.error(e);
       }
-
-      //   var index = file.name.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
-      //   var tv_id = file.name.substring(index); //截断"."之前的，得到后缀
-      //   //如果是视频截取第一个作为图片展示出来
-      //   if (tv_id == ".mp4") {
-      //     //根据后缀，判断是否符合视频格式
-      //     this.findvideocover(file);
-      //   }
     },
     async uploadOssImageFile(fileData) {
       let that = this;
@@ -635,25 +641,46 @@ export default {
         }
       }
     },
-    // 截取视频第一帧
-    findvideocover(file) {
-      file.src = file.url; // url地址 url跟 视频流是一样的
-      console.log("-----filesrc-" + file.src);
-      var canvas = document.createElement("canvas"); // 获取 canvas 对象
-      const ctx = canvas.getContext("2d"); // 绘制2d
-      file.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
-      file.currentTime = 1; // 第一帧
-      file.oncanplay = () => {
-        canvas.width = file.clientWidth; // 获取视频宽度
-        canvas.height = file.clientHeight; //获取视频高度
-        // 利用canvas对象方法绘图
-        ctx.drawImage(file, 0, 0, file.clientWidth, file.clientHeight);
-        // 转换成base64形式
-        this.faceUrl = canvas.toDataURL("image/png"); // 截取后的视频封面
-        console.log("----faceUrl--" + this.faceUrl);
-        // file.url = this.imgsrc;
-      };
-    },
+    // // 截取视频第一帧
+    // findvideocover(file) {
+    //   var fileReader = new FileReader();
+    //   fileReader.readAsDataURL(file);
+    //   var that = this;
+    //   fileReader.onload = function(e) {
+    //     that.videoSrc = e.currentTarget.result;
+    //     console.log(that.videoSrc, 11111);
+    //     const width = 400;
+    //     const height = 300;
+    //     var video = document.getElementById("videofile");
+    //     console.log(video, 66666);
+    //     video.currentTime = 5; //必须设置视频当前时长，要不然会黑屏
+    //     var output = document.getElementById("output");
+    //     // 创建画布准备截图
+    //     var canvas = document.createElement("canvas");
+    //     // 创建图片标签
+    //     var img = document.createElement("img");
+    //     // 获取视频的标签
+    //     video = document.getElementById("videofile");
+    //     video.setAttribute("crossOrigin", "anonymous");
+    //     // 设置画布的宽高
+    //     canvas.width = video.clientWidth;
+    //     canvas.height = video.clientHeight;
+    //     // 图片绘制
+    //     video.onloadeddata = () => {
+    //       canvas
+    //         .getContext("2d")
+    //         .drawImage(video, 0, 0, canvas.width, canvas.height);
+    //       var dataURL = canvas.toDataURL("image/jpeg");
+    //       img.src = dataURL;
+    //       img.width = width;
+    //       img.height = height;
+    //       // 添加到output盒子里面
+    //       output.appendChild(img);
+    //       console.log("--画图--");
+    //       console.log(img);
+    //     };
+    //   };
+    // },
     // 预览
     preview() {
       this.previewVisible = true;