四月是你的謊言，7月是我的坑（圖檔上傳/vue-quill-editor）

最近公司在做背景

使用技術是vue+element

1、上傳圖檔的坑，由于element二次編輯的時候擷取圖檔清單無法進行直接的顯示

以下是我自己寫的上傳圖檔的代碼

html

<div style="display:flex;">
       <img
         :src="item"
         alt
         srcset
         v-for="(item,index) in srcList"
         style="width:148px;height:148px;border-radius: 5px;margin: 0 5px;"
         @click="delectLoad(index)"
       />
       <label
         for="upfile"
         style="color:#000;width:148px;height:148px;border:1px solid #ccc;display:block;line-height:148px;text-align:center;border-radius: 5px;"
         v-show="upShow"
       >上傳圖檔</label>
       <input
         type="file"
         v-show="false"
         name="upfile"
         id="upfile"
         value="請上傳憑證"
         style="width:50px;height:20px;background:#eee"
         @change="getAxios"
       />
 </div>
           

script

1、删除
    delectLoad(index) {
      if (index == 0) {
        this.srcList.splice(index, 1);
      } else {
        this.srcList.splice(index, index);
      }
    },
2、axios請求
    getAxios() {
      let image = document.getElementById("upfile").files[0];
      let data = new FormData();
      data.append("image", image);
      this.$api.reqAddImg(data, res => {
        if (res.status) {
          if (res.data != "") {
            this.srcList.push(res.url);
          } else {
            this.$message({
              message: "圖檔上傳失敗"
            });
          }
        } else {
          this.$message({
            message: res.msg
          });
        }
      });
    },
3、之前上傳的，二次編輯的擷取到的
 this.srcList進行指派
4、如果要進行多個圖檔上傳，需要監聽下
srcList(newVal, oldVal) {
   if (newVal.length >= 4) {
     this.upShow = false;
   } else if (newVal.length >= 0 && newVal.length < 4) {
     this.upShow = true;
   }
 }   
           

2、既然是背景，富文本的編輯不可能沒有

這裡我使用的是vue-quill-editor

1、安裝依賴
npm install vue-quill-editor --save
2、main.js需要引入挂載一下
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
2、為了解決生成圖檔是base64，調用上傳圖檔的接口,使用input
<div>
     <input
       class="uupLoad"
       type="file"
       v-show="false"
       name="upfileff"
       id="upfileff"
       value="請上傳商品資訊"
       style="width:50px;height:20px;background:#eee"
       @change="getAxiosff"
     />
     <quill-editor
       v-model="text"
       ref="myQuillEditor"
       :options="editorOption"
       @change="onEditorChange($event)"
     ></quill-editor>
   </div>
 3、script
 **當我們不需要太多的欄目的時候，可以對它進行設定**
 const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction
  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"]
];
**data裡面的資料的配置**
text: null,
editorOption: {
  placeholder: "",
  theme: "snow", // or 'bubble'
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: {
        image: function(value) {
          if (value) {
            // 觸發input框選擇圖檔檔案
            document.querySelector(".uupLoad").click();
          } else {
            this.quill.format("image", false);
          }
        }
      }
    }
  }
},

**方法：時時擷取編輯器裡面的内容**
onEditorChange({ editor, html, text }) {
      //内容改變事件
      // console.log("---内容改變事件---");
      this.mainMsg = html;
      // console.log(editor, html, text);
    },
**上傳圖檔：此處需要注意et quill = this.$refs.myQuillEditor[0].quill;，有時候直接是對象，有時候是數組，需要注意**
    //上傳商鋪詳情資訊
    getAxiosff() {
      let image = document.getElementById("upfileff").files[0];
      let data = new FormData(); 
      data.append("image", image);
      this.$api.reqAddImg(data, res => {
        if (res.status) {
          let quill = this.$refs.myQuillEditor[0].quill;
          // 如果上傳成功
          if (res.status) {
            // 擷取光标所在位置
            let length = quill.getSelection().index;
            // 插入圖檔  res.url為伺服器傳回的圖檔位址
            quill.insertEmbed(length, "image", res.url);
            // 調整光标到最後
            quill.setSelection(length + 1);
          } else {
            this.$message.error(res.msg);
          }
        } else {
          this.$message({
            message: res.msg
          });
        }
      });
    },