diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index d2bd55f..4a1c014 100644 --- a/src/components/Editor/index.vue +++ b/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); },