vue-quill-editor 富文本編輯器上傳圖片自base64改爲上傳到服務器

就是要一個富文本編輯器，然後有圖片上傳功能，因爲vue-quill-editor是將圖片轉爲base64編碼，所以當圖片比較大時，提交後臺時參數過長，導致提交失敗。

vue-quill-editor引入過程略，我其它文章裏面有~~

廢話不多說，上代碼

1.引入element的圖片上傳組件：

<el-form-item>
        <!-- 圖片上傳組件輔助-->
        <el-upload
          class="avatar-uploader2"
          :action="uploadUrl"
          name="file"
          :show-file-list="false"
          :on-success="uploadSuccessEdit"
          :before-upload="beforeUploadEdit">
        </el-upload>
        <div>
            <quill-editor class="ql-editor" v-model="formInline.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
            </quill-editor>
        </div>
      </el-form-item>

2.上傳前以及上傳成功的方法：

// 上傳圖片前
      beforeUploadEdit(res, file) {
        // 顯示loading動畫
        this.quillUpdateImg = true
      },
      // 上傳圖片成功
      uploadSuccessEdit(res, file) {
        // res爲圖片服務器返回的數據
        // 獲取富文本組件實例
        let quill = this.$refs.myQuillEditor.quill
        // 如果上傳成功
        if (res.code == 0) {
          // 獲取光標所在位置
          let length = quill.getSelection().index;
          // 插入圖片  res.data.url爲服務器返回的圖片地址
          quill.insertEmbed(length, 'image', res.data.url)
          // 調整光標到最後
          quill.setSelection(length + 1)
        } else {
          this.$message.error('圖片插入失敗')
        }
        // loading動畫消失
        this.quillUpdateImg = false
      },

3.定義工具欄，寫在<script>標籤的第一行

  // 工具欄配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'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', 'video'],
    ['clean']                                         // remove formatting button
  ]

4.重寫點擊圖片按鈕事件

代碼爲：

editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具欄
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 觸發input框選擇圖片文件
                    document.querySelector('.avatar-uploader2 input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },

 

 

到此，圖片上傳改爲上傳到服務器修改完成，點擊圖片的icon的時候，文本編輯器最後存儲的是服務器返回的url地址