修改

src/components/Editor/index.vue

@@ -26,6 +26,9 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import { getToken } from "@/utils/auth";
+import {
+  uploadimg
+} from '@/api/system/editor.js'
 import Video from "@/utils/quillVideo";
 Quill.register(Video, true);
 export default {
@@ -219,9 +222,19 @@ export default {
       return isLt1M && isVideo;
     },
     // 文件上传成功时的钩子
-    onSuccessVideo(res) {
+    async onSuccessVideo(res) {
       if (res.code === 200) {
-        this.insertVideoLink(process.env.VUE_APP_BASE_API + res.imgUrl);
+        const dataURL = await this.getVideoBase64(process.env.VUE_APP_BASE_API + res.imgUrl);
+        const imgUrl = await this.getFileFromBase64(dataURL, "kefu.jpeg");
+        const fd1 = new FormData();
+        //拿到图片文件请求后端接口返回链接
+        fd1.append("file", imgUrl);
+        let CoverImg = await uploadimg(fd1).then(res => {
+          if (res.code == 200) {
+            return res.url
+          }
+        })
+        await this.insertVideoLink(process.env.VUE_APP_BASE_API + res.imgUrl, CoverImg);
       } else {
         this.$message.error(res.msg);
       }
@@ -230,8 +243,41 @@ export default {
     onErrorVideo() {
       this.$message.error("上传失败");
     },
+    // 截取视频第一帧作为封面图 然后转成base64
+    getVideoBase64(url) {
+      return new Promise(function (resolve) {
+        let dataURL = "";
+        const video = document.createElement("video");
+        video.setAttribute("crossOrigin", "anonymous"); // 处理跨域
+        video.setAttribute("src", url);
+        video.setAttribute("preload", "auto");
+        video.addEventListener("loadeddata", function () {
+          const canvas = document.createElement("canvas");
+          console.log("video.clientWidth", video.videoWidth); // 视频宽
+          console.log("video.clientHeight", video.videoHeight); // 视频高
+          const width = video.videoWidth || 400; // canvas的尺寸和图片一样
+          const height = video.videoHeight || 240; // 设置默认宽高为  400  240
+          canvas.width = width;
+          canvas.height = height;
+          canvas.getContext("2d").drawImage(video, 0, 0, width, height); // 绘制canvas
+          dataURL = canvas.toDataURL("image/jpeg"); // 转换为base64
+          resolve(dataURL);
+        });
+      });
+    },
+    // base64转图片
+    getFileFromBase64(base64URL, filename) {
+      var arr = base64URL.split(","),
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, { type: "image/png" });
+    },
     // 插入视频
-    insertVideoLink(videoLink) {
+    insertVideoLink(videoLink, CoverImg) {
       if (!videoLink) return this.$message.error("视频地址不能为空！");
       this.dialogFormVisible = false;
       // 获取富文本
@@ -239,7 +285,7 @@ export default {
       // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null
       let index = range ? range : 0;
       // 在光标所在位置 插入视频
-      this.Quill.insertEmbed(index, "video", { url: videoLink });
+      this.Quill.insertEmbed(index, "video", { url: videoLink, poster: CoverImg });
       // 调整光标到最后
       this.Quill.setSelection(index + 1);
     },