前言

本篇文章將介紹vue-quill-editor上傳圖片的那些事，通常來說，我們資料庫內都是儲存圖片路徑的，所以上傳完圖片之後，要回傳一個路徑給前端，這才是完整的上傳步驟。
第一步：上傳圖片，第二步：儲存到伺服器，並且生成路徑儲存到資料庫，第三步：回傳前端，後臺圖片路徑，前端顯示圖片。
本文中使用了element-ui框架來幫助我完成前端展示工作。

上傳圖片

上傳圖片也有幾種方式，比如直接使用file控制元件上傳到指定地址，又或者是藉助封裝好的上傳按鈕上傳圖片，如果是base64傳到後臺，還需要轉回圖片原格式加以儲存，如果是二進位制圖片流則直接傳到伺服器即可。
我使用的是element-ui框架裡的el-upload元件進行上傳，而且這個元件是隱藏的，不會顯示出來

<el-upload
            class="avatar-uploader"
            :action="articleImgUrl"
            name="img"
            :headers="headerObj"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
            </el-upload>

上述引數解釋：
（1）class 上傳元件的樣式，也可以用於查詢該元件
（2）action 傳值，必選引數，上傳的地址
（3）name 上傳檔案欄位名，後端在獲取檔案時需要起一個名字，這個名字就在這裡定義
（4）headers 設定上傳的請求頭部
（5） show-file-list 是否顯示已上傳檔案列表，這裡不顯示
（6） on-success 檔案上傳成功時的鉤子，如果成功，則回傳圖片地址，顯示圖片將src傳入地址
（7） on-error 檔案上傳失敗時的鉤子
（8）before-upload 上傳檔案之前的鉤子，引數為上傳的檔案，若返回 false 或者返回 Promise 且被 reject，則停止上傳。

我首先需要監聽富文字點選上傳圖片按鈕的事件：

editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            // 工具欄
            container: toolbarOptions.toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  // upload點選上傳事件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },

上面程式碼當中toolbar裡的handlers就是監聽點選圖片按鈕事件，然後我們模擬點選el-upload元件，就會彈出選擇檔案的框，我們開始選擇檔案進行上傳。
當後端處理好圖片後，我們拿到回傳的地址，在富文字游標處插入img標籤

// 上傳成功
    uploadSuccess(res) {
      var dt = res.result
      let quill = this.$refs.myQuillEditor.quill
      // 如果上傳成功
      if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
        // 獲取游標所在位置
        let length = quill.getSelection().index
        // 插入圖片  dt.url為伺服器返回的圖片地址
        quill.insertEmbed(length, 'image', this.glAPI + dt.url)
        // 調整游標到最後
        quill.setSelection(length + 1)
      } else {
        this.$message.error('圖片插入失敗')
      }
      // loading載入隱藏
      this.quillUpdateImg = false
    },

如果小夥伴喜歡原生標籤使用input標籤file型別也是可以的，或者也可以藉助JavaScript或者jQuery響應點選事件來傳檔案也是可以噠！

總結

上傳圖片其實是一個很簡單的過程，但是卻需要前後端來配合食用，味道才正宗。所以只學前端的小夥伴可以找個後端開發寫個介面啥的幫你回傳一個地址，或者乾脆自己造個假的也行。
我一開始不是很清楚圖片到底怎麼傳的，比如base64是什麼，其實就是照片的一串字串，這一串字串就是照片，有的時候是可能存在把這一串base64字串儲存到資料庫的。但是大多數情況我們還是在資料庫中儲存路徑，所以很多想儲存圖片路徑的小夥伴們，可以參考上述程式碼，下一篇我將結合Java來展示圖片儲存的程式碼是怎樣實現的，又是怎樣回傳圖片地址的，敬請期待吧！！