上传图片
上传视频

<template><div><quill-editorstyle="padding-left: 0; padding-top: 0px; margin-top: 0px"ref="editorRef"v-model="content"class="ql-editor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"/><el-dialogtitle="视频上传":visible.sync="dialogVisible"width="30%"append-to-body:before-close="closeDig"><el-uploadv-loading="loading"class="upload-demo"dragaction=""list-type="video/mp4":before-upload="beforeUpload":on-remove="removefile":limit="1":on-success="handleSuccess":http-request="uploadVoide":file-list="backfile":on-exceed="handleExceed":multiple="multiple"multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传mp4且不超过500MB</div></el-upload><!-- <span slot="footer" class="dialog-footer"><el-button @click="closeDig">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span> --></el-dialog></div></template><script>import { Notification, Loading } from "element-ui";import { quillEditor } from "vue-quill-editor";import { uploadOss } from "@/api/uploadOss";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";//优化图片自定义大小 新建的css文件的保存位置，如不同，需要修改import "@/assets/styles/quillEditor.css";import imageResize from "quill-image-resize-module";Quill.register("modules/imageResize", imageResize);import { ImageDrop } from "quill-image-drop-module";Quill.register("modules/imageDrop", ImageDrop);//优化文字大小选项及样式var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];var Size = Quill.import("formats/size");Size.whitelist = sizes;Quill.register(Size, true);// Quill.register(Video, true)export default {components: {quillEditor,},props: {videoPrefix: {type: String,default: "hos/quillEditor/video"},imagePrefix: {type: String,default: "hos/quillEditor/image"},notUpdate: {type: Boolean,default: false}},data() {return {content: undefined,dialogVisible: false,multiple: false,loading: false,typelist:["mp4"],editorOption: {modules: {toolbar: {container: [],handlers: {image: this.imageUploadOss,'video': this.videoUploadOss,},},imageDrop: true, // 拖动加载图片组件。imageResize: {//调整大小组件。displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},},placeholder: "请输入正文",},backfile:[]};},created() {if(!this.notUpdate){this.editorOption.modules.toolbar.container = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{ size: sizes }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", "video"], // 链接、图片、视频]}else {this.editorOption.modules.toolbar.container = []}},methods: {tabClick() {// 清空内容this.content = "";},initContent(info){this.content = info},// 失去焦点事件onEditorBlur(quill) {this.$emit('onEditorBlur', quill)},// 获得焦点事件onEditorFocus(quill) {this.$emit('onEditorFocus', quill)},// 准备富文本编辑器onEditorReady(quill) {this.$emit('onEditorReady', quill)},// 内容改变事件onEditorChange({ quill, html, text }) {this.$emit('onEditorChange', { quill, html, text })},imageUploadOss() {const { quill } = this.$refs.editorRef;let fileInput = quill.container.querySelector("input.ql-image[type=file]");if (fileInput === null) {fileInput = document.createElement("input");fileInput.setAttribute("type", "file");// 设置图片参数名fileInput.setAttribute("name", "file");// 可设置上传图片的格式fileInput.setAttribute("accept","image/png, image/gif, image/jpeg, image/bmp, image/x-icon");fileInput.classList.add("ql-image");// 监听选择文件fileInput.addEventListener("change", () => {const formData = new FormData();formData.append("file", fileInput.files[0]);formData.append("imageUrl", this.imagePrefix + "/");uploadOss(formData).then((res) => {if (res.status === "200") {const length = quill.getSelection(true).index;quill.insertEmbed(length,"image",process.env.VUE_APP_DOMAIN_STATIC + res.result);quill.setSelection(length + 1);}}).catch((err) => {console.log(err);Notification.error("图片上传失败");});});}fileInput.click();},videoUploadOss(){// document.querySelector('#upvideoshow').click()this.dialogVisible = true},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 1 个文件`);},handleSuccess(res, file, fileList) {// this.imageUrl = URL.createObjectURL(file.raw);console.log('fileList',fileList)console.log(file.raw)},beforeUpload(file) {const typelist = ["video/mp4"];var bool = typelist.some((item) => {console.log(file.type)return item == file.type;});const isLt2M = file.size / 1024 / 1024 < 500;if (!bool) {this.$message.error("只能是mp4格式的视频!");}if (!isLt2M) {this.$message.error("上传视频大小不能超过 500MB!");}return bool && isLt2M;},removefile(file, fileList) {console.log('remove',file)},uploadVoide(params){this.loading = trueconst { quill } = this.$refs.editorRef;console.log('uploadVoide params',params)const form = new FormData(); // 使用FormData传参数和文件form.append("file", params.file); // 文件form.append("imageUrl", this.videoPrefix + "/");uploadOss(form).then((res) => {if (res.status === "200") {this.closeDig()const length = quill.getSelection(true).index;quill.insertEmbed(length,"video",process.env.VUE_APP_DOMAIN_STATIC + res.result);quill.setSelection(length + 1);}}).catch((err) => {console.log(err);Notification.error("视频上传失败");}).finally(()=> (this.loading = false));},closeDig(){this.backfile = []this.dialogVisible = false}},};</script><style scoped lang="scss">::v-deep(.ql-tooltip){left: 0px!important;}</style>