<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 ? "保存并發(fā)布" : "記載中" }}
              </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);
                  // 觸發(fā)input框選擇圖片文件
                  document.querySelector(".rich-uploader2 input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: function (value) {
                if (value) {
                  console.log(value);
                  // 觸發(fā)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>

文章來源地址http://www.zghlxwxcb.cn/news/detail-622475.html

到了這里，關于element-ui 圖片上傳 及 quillEditor富文本（圖片視頻上傳）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！