「前端早讀君002」改造vue-quill-editor：結合element-ui上傳圖片到服務器

時間 2019-11-11

標籤前端改造 vue quill editor 結合 element 上傳圖片服務器简体版

原文原文鏈接

前排提示：如今能夠直接使用封裝好的插件vue-quill-editor-uploadhtml

需求概述

vue-quill-editor是咱們再使用vue框架的時候經常使用的一個富文本編輯器，在進行富文本編輯的時候，咱們每每要插入一些圖片，vue-quill-editor默認的處理方式是直接將圖片轉成base64編碼，這樣的結果是整個富文本的html片斷十分冗餘，一般來說，每一個服務器端接收的post的數據大小都是有限制的，這樣的話有可能致使提交失敗，或者是用戶體驗不好，數據要傳遞好久才所有傳送到服務器。
所以，在富文本編輯的過程當中，對於圖片的處理，咱們更合理的作法是將圖片上傳到服務器，再將圖片連接插入到富文本中，以達到最優的體驗。
廢話很少說，接下來直接看如何改造前端

改造分析

查閱網上的資料，我感受提供的方案都不是特別友好，網上搜索的基本都是這一個方法
配合 element-ui 實現上傳圖片/視頻到七牛或者是直接從新寫一個按鈕來進行自定義圖片操做vue

坦白講，上面這2個方法都很特別，也的確有效果，可是我我的仍是以爲不完美，第一個方法寫得太麻煩，第二個方法有點投機取巧。
結合上面兩種方法以及官方的文檔，我這裏提供一個新的改造思路給你們參考。git

引入element-ui

和第一種方法相似，爲了更好的控制上傳的圖片，我這裏也是引用了element-ui的上傳圖片組件github

<template>
    <div>
        <!-- 圖片上傳組件輔助-->
        <el-upload
                class="avatar-uploader"
                :action="serverUrl"
                name="img"
                :headers="header"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                serverUrl: '',  // 這裏寫你要上傳的圖片服務器地址
                header: {token: sessionStorage.token}  // 有的圖片服務器要求請求頭須要有token  
            }
        },
        methods: {
            // 上傳圖片前
            beforeUpload(res, file) {},
            // 上傳圖片成功
            uploadSuccess(res, file) {},
            // 上傳圖片失敗
            uploadError(res, file) {}
        }
    }
</script>

這裏要使用element-ui主要有2個好處element-ui

能夠對圖片上傳前，圖片上傳成功，圖片上傳失敗等狀況進行操做，也就是代碼中的

:on-success="uploadSuccess"  //  圖片上傳成功
  :on-error="uploadError"  // 圖片上傳失敗
  :before-upload="beforeUpload"  // 圖片上傳前

使用element-ui的v-loading顯示loading動畫

引入vue-quill-editor

這裏對於如何安裝和引入vue-quill-editor和就很少作陳述了，不清楚的同窗本身Google下哈。
在代碼中寫入vue-quill-editor後以下segmentfault

<template>
    <div>
        <!-- 圖片上傳組件輔助-->
        <el-upload
                class="avatar-uploader"
                :action="serverUrl"
                name="img"
                :headers="header"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
        <!--富文本編輯器組件-->
       <el-row v-loading="uillUpdateImg">
        <quill-editor
                v-model="detailContent"
                ref="myQuillEditor"
                :options="editorOption"
                @change="onEditorChange($event)"
                @ready="onEditorReady($event)"
        >
        </quill-editor>
       </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                quillUpdateImg: false, // 根據圖片上傳狀態來肯定是否顯示loading動畫，剛開始是false,不顯示
                serverUrl: '',  // 這裏寫你要上傳的圖片服務器地址
                header: {token: sessionStorage.token},  // 有的圖片服務器要求請求頭須要有token之類的參數，寫在這裏
                detailContent: '', // 富文本內容
                editorOption: {}  // 富文本編輯器配置
            }
        },
        methods: {
            // 上傳圖片前
            beforeUpload(res, file) {},
            // 上傳圖片成功
            uploadSuccess(res, file) {},
            // 上傳圖片失敗
            uploadError(res, file) {}
        }
    }
</script>

這裏能夠看到咱們用一個<el-row>包裹咱們的富文本組件，是爲了使用loading動畫，就是v-loading這個設置服務器

重寫點擊圖片按鈕事件

從下圖能夠看到，默認的配置中，整個工具欄具有了全部的功能，天然也包括紅圈中的圖片上傳功能了。
那麼接下來咱們要怎麼去重寫這個按鈕的事件呢。
微信

很簡單，咱們須要在editorOption配置中這麼寫session

export default {
data() {
            return {
            quillUpdateImg: false, // 根據圖片上傳狀態來肯定是否顯示loading動畫，剛開始是false,不顯示
                serverUrl: '',  // 這裏寫你要上傳的圖片服務器地址
                header: {token: sessionStorage.token},  // 有的圖片服務器要求請求頭須要有token之類的參數，寫在這裏
                detailContent: '', // 富文本內容
                editorOption: {
                    placeholder: '',
                    theme: 'snow',  // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具欄
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('#quill-upload input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
}

配置中的handlers是用來定義自定義程序的，然而咱們配置完後會懵逼地發現，整個富文本編輯器的工具欄的圖片上傳等按鈕都不見了 只保留了幾個基本的富文本功能。

這個是由於添加自定義處理程序將覆蓋默認的工具欄和主題行爲
所以咱們要再自行配置下咱們須要的工具欄，全部功能的配置以下，你們能夠按需配置

<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
]

export default {
data() {
 return {
editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具欄
              handlers: {
                'image': function (value) {
                  if (value) {
                    alert(1)
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        }
    }
 }
}

</script>

因爲這裏的工具欄配置列舉了全部，看起來很長一堆，我建議你們能夠寫在單獨一個文件，而後再引入，美觀一點

自定義按鈕事件打開上傳圖片

通過上面的配置，你們點擊一下圖片，能夠看出彈出了個1，說明咱們的自定義事件生效了，那麼接下來，你們的思路是否是就很清晰啦？
咱們須要在handlers裏面繼續完善咱們的圖片點擊事件。

第一步，點擊按鈕選擇本地圖片

handlers: {
           'image': function (value) {
             if (value) {
             // 觸發input框選擇圖片文件
                document.querySelector('.avatar-uploader input').click()
               } else {
                this.quill.format('image', false);
              }
           }
        }

在這裏咱們的自定義事件就結束了，接下來圖片上傳成功或者失敗都由

:on-success="uploadSuccess"  //  圖片上傳成功
  :on-error="uploadError"  // 圖片上傳失敗
  :before-upload="beforeUpload"  // 圖片上傳前

這三個函數來處理

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

好了，本文就講到這，目前運行良好，整個文章的代碼比較多，可是實際上須要去深刻理解的地方不多，咱們只是簡單重定義了圖片按鈕的觸發事件。
對了，你們別忘記安裝element-ui和vue-quill-editor哦。
若是有錯誤，歡迎你們多提提意見，但願這篇文章能幫到有須要的人。

獲取更多知識，請微信掃碼關注公衆號關注早讀君，天天早晨爲你推送前端知識，度過擠地鐵坐公交的時光。
並且不定時舉辦活動贈送書籍哦