загрузка изображений element-ui и форматированный текст quillEditor (загрузка изображений и видео)

<template>
  <div class="card" style="overflow: hidden; padding-bottom: 10px">
    <div style="padding: 20px 20px 0 20px">
      <span class="title_top"><span class="top_icon"></span>基本信息</span>
      <el-divider></el-divider>
    </div>
    <div class="box">
      <div>
        <div class="box_count">
          <div class="box_l">
            <FlexLinePI :title="'图文标题'" :dropshow="true">
              <el-input v-model.trim="ruleForm.title" maxlength="20" show-word-limit type="text" placeholder="请输入标题"
                v-clear-emoij @input="e => (ruleForm.title = formateText(e))"></el-input>
            </FlexLinePI>
            <FlexLinePI :title="'图文摘要'" :dropshow="true"><el-input style="white-space: pre-wrap;word-break: break-all;"
                v-model.trim="ruleForm.note" type="textarea" maxlength="150" show-word-limit rows="5"
                placeholder="请输入正文详情" @input="e => (ruleForm.note = formateText(e))"></el-input>
            </FlexLinePI>
            <FlexLinePI :title="'封面图片'" :dropshow="true">
              <el-upload class="avatar-uploader" :action="upload" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="onprogress">
                <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip" style="">
                  （ 建议上传图片尺寸100x100px，大小不超过5M ）
                </div>
              </el-upload>
            </FlexLinePI>
            <FlexLinePI :title="'图文描述'" :dropshow="true" :position="false">
              <div>
                <quill-editor v-model="ruleForm.content" ref="quillEditor" :options="editorOption">
                </quill-editor>
                <div class="rich-uploader">
                  <!-- 图片上传组件辅助-->
                  <el-upload class="rich-uploader2" name="pic" action="" :show-file-list="false" accept=".jpg,.png,jpeg"
                    :http-request="httpRequest">
                  </el-upload>
                  <AliUpload class="rich-uploader3" :url="videoURL" @deleteVideo="deleteVideo"
                    @beforeupload="beforeupload" @uploadSuccess="uploadVideoSuccess" />
                  <!-- 
                  <el-upload class="rich-uploader3" name="pic" action="" :show-file-list="false" accept="video/*"
                    :http-request="httpRequestvideo">
                  </el-upload> -->
                </div>
              </div>
            </FlexLinePI>
            <div class="buttom">
              <el-button type="primary" @click="addandedit(0)" :loading="loadingbtn">{
    
    {
    
     loadingbtn == false ? "保存" : "记载中"
              }}</el-button>
              <el-button type="primary" @click="addandedit(1)" :loading="loadingbtn">
                {
    
    {
    
     loadingbtn == false ? "保存并发布" : "记载中" }}
              </el-button>
              <!-- <el-button type="primary" @click="look">预览</el-button> -->
            </div>
          </div>
          <div class="box_r" :style="{
    
    
            'background-image': `url(${
      
      require('../../../assets/images/phone.png')}`
          }">
            <div class="box_r_informationurl">
              <div class="box_r_inImg">
                <img src="../../../assets/images/authorlogo.png" alt="" srcset="" style="width: 100%; height: 100%" />
              </div>
              <div class="box_r_inlanguage" style="width: 180px">
                <p style="-webkit-line-clamp: 1; font-size: 14px; width: 100%" class="ellipsis">
                  {
    
    {
    
     ruleForm.title != "" ? ruleForm.title : "请输入标题" }}
                </p>
                <div style="display: flex; margin-top: 5px; height: 80px">
                  <div style="
                      flex: 1;
                      -webkit-line-clamp: 6;
                      font-size: 12px;
                      color: #999999;
                    " class="ellipsis">
                    {
    
    {
    
     ruleForm.note != "" ? ruleForm.note : "请输入正文详情" }}
                  </div>
                  <div class="box_r_inlanguageimg">
                    <img :src="ruleForm.cover != '' ? ruleForm.cover : urlimg" alt="" srcset=""
                      style="width: 100%; height: 100%" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片视频上传中 -->
    <el-dialog title="" :visible.sync="dialogVisiblevideo" width="160px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="false">
      <span slot="title"></span>
      <div class="loadding_image" style="">
        <i class="el-icon-loading" style="font-size: 50px;"></i>
        <div>{
    
    {
    
     uptext }}</div>
        <div v-if="videosize != ''">此视频有 {
    
    {
    
     videosize }} MB大小，请稍等...</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import step from "@/components/EchartsChart/nextstep.vue";
import {
    
     upload, uploadvideo } from "@/api/common.js";
import {
    
     quillEditor, Quill } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from "axios";
import {
    
    
  detailGraphic,
  addGraphic,
  updateGraphic
} from "@/api/material/index.js";
// 引入修改video模块并注册
import video from "@/assets/js/quillVideo.js";
import AliUpload from './component/aliUpload.vue'
Quill.register(video);
export default {
    
    
  name: "AddImageText",
  components: {
    
    
    quillEditor,
    AliUpload
    // , step
  },
  computed: {
    
    
    quill() {
    
    
      const {
    
     quill } = this.$refs.quillEditor || {
    
    };
      return quill;
    }
  },
  data() {
    
    
    const toolbarOptions = [
      ["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: ["small", false, "large", "huge"] }], // 字体大小
      [{
    
     header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

      [{
    
     color: [] }, {
    
     background: [] }], // 字体颜色，字体背景颜色
      [{
    
     font: [] }], //字体
      [{
    
     align: [] }], //对齐方式

      ["clean"], //清除字体样式
      ["image"], //上传图片
      ["video"] // 视频
    ];
    return {
    
    
      upload: upload,
      uploadvideo: uploadvideo,
      ruleForm: {
    
    
        id: "",
        title: "",
        note: "",
        cover: "",
        content: ""
      },
      // 视频
      progress: 0,
      // 富文本
      editorOption: {
    
    
        placeholder: "请输入内容",
        theme: "snow",
        modules: {
    
    
          clipboard: {
    
    
            // 粘贴版，处理粘贴时候带图片
            matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
          },
          toolbar: {
    
    
            container: toolbarOptions, // 工具栏
            handlers: {
    
    
              image: function (value) {
    
    
                if (value) {
    
    
                  console.log(value);
                  // 触发input框选择图片文件
                  document.querySelector(".rich-uploader2 input").click();
                } else {
    
    
                  this.quill.format("image", false);
                }
              },
              video: function (value) {
    
    
                if (value) {
    
    
                  console.log(value);
                  // 触发input框选择图片文件
                  document.querySelector(".rich-uploader3 input").click();
                } else {
    
    
                  this.quill.format("video", false);
                }
              }
            }
          }
        }
      },
      // 上传图片
      urlimg: require("../../../assets/images/gift.png"),

      // 当前id
      updateId: "",

      // 提交
      loadingbtn: false,
      dialogVisiblevideo: false,
      uptext: "",
      videosize: ""
    };
  },
  mounted() {
    
    
    this.updateId = this.$route.query.id
    if (this.updateId == undefined) {
    
    
      this.ruleForm = {
    
    
        id: "",
        title: "",
        note: "",
        cover: "",
        content: ""
      };
    } else {
    
    
      // 详情
      this.getdetail(this.updateId);
    }

    // 复制图片到富文本
    // let quill = this.$refs.quillEditor.quill;
    // quill.root.addEventListener(
    //   "paste",
    //   (evt) => {
    
    
    //     if (
    //       evt.clipboardData &&
    //       evt.clipboardData.files &&
    //       evt.clipboardData.files.length
    //     ) {
    
    
    //       evt.preventDefault();
    //       [].forEach.call(evt.clipboardData.files, (file) => {
    
    
    //         if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
    
    
    //           return;
    //         }
    //         const formdata = new FormData();
    //         formdata.append("file", file, file.name);
    //         formdata.append("type", "1");
    //         // let length = quill.getSelection().index;
    //         quill.insertEmbed(1, "image", file);
    //         axios.post(upload, formdata, { header: { "Content-Type": "multipart/form-data" } })
    //           .then(res => {
    
    
    //             if (res.data.status == 1) {
    
    
    //               // let length = quill.getSelection().index;
    //               // 插入图片  服务器返回的图片地址
    //               quill.insertEmbed(1, "image", res.data.data.real_path);
    //               //       // 调整光标到最后
    //               quill.setSelection(1 + 1);
    //             } else {
    
    
    //               _this.$message.warning(res.data.msg || "数据响应过慢，请稍后再试");
    //             }
    //           })
    //           .catch(err => {
    
    
    //             console.log(err);
    //           });
    //       });
    //     }
    //   },
    //   false
    // );
  },
  computed: {
    
    },
  methods: {
    
    
    handleCustomMatcher(node, Delta) {
    
    
      console.log(Delta,123)
      let ops = []
      Delta.ops.forEach(op => {
    
    
        if (op.insert && typeof op.insert === 'string') {
    
    // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
          ops.push({
    
    
            insert: op.insert,
          })
        } else {
    
    
          this.$message({
    
    
            message: '不允许粘贴图片,请手动上传',
            type: 'warning'
          })
        }
      })
      Delta.ops = ops
      return Delta
    },

    //
    handleAvatarSuccess(res, file) {
    
    
      if (res.status == 1) {
    
    
        this.dialogVisiblevideo = false;
        this.ruleForm.cover = res.data.real_path;
      }
    },
    beforeAvatarUpload(file) {
    
    
      let types = [
        "image/jpeg",
        "image/jpg",
        "image/png"
      ];
      const isImage = types.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < 5;
      if (!isImage) {
    
    
        this.$message.warning("上传图片只能是 JPG、JPEG、PNG 格式!");
        return false;
      }
      if (!isLtSize) {
    
    
        this.$message.warning("上传图片大小不能超过 5MB!");
        return false;
      }
      return true;
    },
    onprogress(event, file, fileList) {
    
    
      console.log(event, file, fileList);
      // this.dialogVisiblevideo = true;
    },
    // 详情
    getdetail(id) {
    
    
      detailGraphic({
    
    
        id: id
      })
        .then(res => {
    
    
          if (res.status == 1) {
    
    
            this.ruleForm = {
    
    
              id: res.data.id,
              title: res.data.title,
              note: res.data.note,
              cover: res.data.cover,
              content: res.data.content
            };
          } else {
    
    
            this.$message.warning(res.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
    
    
          console.log(err);
        });
    },
    //  步骤 2 =====================================================
    httpRequest(item) {
    
    
      const _this = this;
      _this.uptext = "图片正在上传中...";
      _this.videosize = "";
      let quill = _this.$refs.quillEditor.quill;
      let formdata = new FormData();
      formdata.append("file", item.file, item.file.name);
      formdata.append("type", "1");
      let length = quill.getSelection().index;
      quill.insertEmbed(length, "image", item.file);
      axios
        .post(upload, formdata, {
    
    
          header: {
    
     "Content-Type": "multipart/form-data" }
        })
        .then(res => {
    
    
          if (res.data.status == 1) {
    
    
            let length = quill.getSelection().index;
            // 插入图片  服务器返回的图片地址
            quill.insertEmbed(length, "image", res.data.data.real_path);
            //       // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
    
    
            _this.$message.warning(res.data.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
    
    
          console.log(err);
        });
    },

    // ==============================================================
    // 保存编辑
    addandedit(val) {
    
    
      if (this.ruleForm.title == "") {
    
    
        this.$message.warning("请输入图文标题");
        return;
      }
      if (this.ruleForm.note == "") {
    
    
        this.$message.warning("请输入图文摘要");
        return;
      }
      if (this.ruleForm.cover == "") {
    
    
        this.$message.warning("请上传封面图片");
        return;
      }
      if (this.ruleForm.content == "") {
    
    
        this.$message.warning("请输入图文描述");
        return;
      }
      this.loadingbtn = true;
      if (this.updateId == undefined) {
    
    
        let tmpParams = {
    
    
          id: "",
          title: this.ruleForm.title, // 时间
          note: this.ruleForm.note, // 时间
          cover: this.ruleForm.cover,
          content: this.ruleForm.content,
          is_publish: val
        };
        this.sever(tmpParams);
      } else {
    
    
        let tmpParams = {
    
    
          id: this.updateId,
          title: this.ruleForm.title, // 时间
          note: this.ruleForm.note, // 时间
          cover: this.ruleForm.cover,
          content: this.ruleForm.content,
          is_publish: val
        };
        this.edit(tmpParams);
      }
    },
    // 保存
    sever(val) {
    
    
      addGraphic(val)
        .then(res => {
    
    
          if (res.status == 1) {
    
    
            this.loadingbtn = false;
            this.$router.push({
    
    
              name: "ImageText"
            });
          } else {
    
    
            this.$message.warning(res.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
    
    
          console.log(err);
        });
    },
    // 编辑
    edit(val) {
    
    
      updateGraphic(val)
        .then(res => {
    
    
          if (res.status == 1) {
    
    
            this.loadingbtn = false;
            this.$router.push({
    
    
              name: "ImageText"
            });
          } else {
    
    
            this.$message.warning(res.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
    
    
          console.log(err);
        });
    },
    // 视频上传 =================
    deleteVideo(val) {
    
    
      console.log(val)
    },
    beforeupload(val) {
    
    
      this.dialogVisiblevideo = val.isshow;
      this.uptext = "视频上传中...";
      this.videosize = Math.ceil(val.filesize / (1024 * 1024));
    },
    uploadVideoSuccess(val) {
    
    
      this.$message.success("上传成功");
      this.dialogVisiblevideo = val.isshow;
      let quill = this.$refs.quillEditor.quill;
      let length = quill.getSelection().index;
      // 插入图片  服务器返回的图片地址
      quill.insertEmbed(length, "video", val.videoURL);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    //  ======
    httpRequestvideo(item) {
    
    
      let chunkSize = 1024 * 1024 * 2; // 每个切片的大小（这里设置为2MB）
      let totalChunks = Math.ceil(item.file.size / chunkSize); // 总切片数
      let currentChunk = 1; // 当前切片索引
      var start = currentChunk * chunkSize;
      var end = Math.min(totalChunks, start + chunkSize);
      this.dialogVisiblevideo = true;
      this.videosize = Math.ceil(item.file.size / (1024 * 1024));
      this.uptext = "视频上传中...";
      const uploadNextChunk = () => {
    
    
        const formData = new FormData();
        formData.append("name", item.file.name);
        formData.append("data", item.file.slice(start, end));
        // formData.append("data", item.file);
        formData.append("total", totalChunks);
        formData.append("index", currentChunk);
        formData.append("filename", item.file.name);
        axios
          .post(uploadvideo + "?act=upload", formData, {
    
    
            headers: {
    
     "Content-Type": "multipart/form-data" },
            onUploadProgress: progressEvent => {
    
    
              this.progress = Math.round(
                (currentChunk * 100 +
                  progressEvent.loaded / progressEvent.total) /
                totalChunks
              );
            }
          })
          .then(res => {
    
    
            currentChunk++;
            if (currentChunk < totalChunks + 1) {
    
    
              uploadNextChunk();
            } else {
    
    
              this.progress = 0; // 上传完成后重置进度
              let date = {
    
    
                name: item.file.name,
                data: item.file,
                total: totalChunks,
                index: currentChunk,
                filename: item.file.name
              };
              this.uploadok(date);
            }
          })
          .catch(error => {
    
    
            this.dialogVisiblevideo = true;
            console.error("Error uploading file:", error);
          });
      };
      uploadNextChunk();
    },
    uploadok(val) {
    
    
      let quill = this.$refs.quillEditor.quill;
      let formdata = new FormData();
      formdata.append("name", val.name);
      formdata.append("data", val.data);
      formdata.append("total", val.total);
      formdata.append("index", val.index);
      formdata.append("filename", val.filename);
      axios
        .post(uploadvideo + "?act=join", formdata, {
    
    
          headers: {
    
     "Content-Type": "multipart/form-data" }
        })
        .then(res => {
    
    
          if (res.data.status == 1) {
    
    
            this.dialogVisiblevideo = false;
            this.$message.success(res.msg || "完成视频上传");
            let length = quill.getSelection().index;
            // 插入图片  服务器返回的图片地址
            quill.insertEmbed(length, "video", res.data.path);
            // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
    
    
            this.dialogVisiblevideo = false;
            this.$message.warning(res.data.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(error => {
    
    
          this.dialogVisiblevideo = false;
          console.error("Error uploading file:", error);
        });
    }
  }
};
</script>
<style scoped lang="less">
p {
    
    
  margin: 0;
  padding: 0;
}

.box {
    
    
  width: 90%;
  // margin: 0 auto;
  margin-left: 35px;

  .box_count {
    
    
    display: flex;

    // justify-content: center;
    .box_l {
    
    
      width: 50%;
    }

    .box_r {
    
    
      width: 320px;
      height: 580px;
      margin: 10px 10px 10px 100px;
      background-size: 100% 100%;
      // box-shadow: 0 0 10px 0 #ccc;
      border-radius: 25px;
      position: relative;

      .box_r_informationurl {
    
    
        width: 100%;
        margin-top: 60px;
        display: flex;
        padding: 30px;

        .box_r_inImg {
    
    
          width: 36px;
          height: 36px;
          margin-left: 10px;
        }

        .box_r_inlanguage {
    
    
          flex: 1;
          margin: 0 10px;
          background: #ffffff;
          padding: 10px;
          border-radius: 5px;

          .box_r_inlanguageimg {
    
    
            width: 50px;
            height: 50px;
          }
        }
      }
    }
  }

  .buttom {
    
    
    display: flex;
    justify-content: center;
    margin: 10px 0;
  }
}

/deep/ .ql-container {
    
    
  height: 600px;
}

/deep/ .avatar {
    
    
  border-radius: 0;
}

/deep/ .el-dialog__header {
    
    
  display: none;
}

/deep/ .el-dialog__body {
    
    
  padding: 10px 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff00;
  color: #ccc;
}

.loadding_image {
    
    
  margin: 0 auto;
  text-align: center;
  width: 125px;
}
</style>