快捷導(dǎo)航

VueQuillEditor富文本上傳圖片(非base64)

更新時(shí)間：2020年06月03日 09:17:49 作者：Caeser110

這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本篇文章將介紹vue-quill-editor上傳圖片的那些事，通常來(lái)說(shuō)，我們數(shù)據(jù)庫(kù)內(nèi)都是保存圖片路徑的，所以上傳完圖片之后，要回傳一個(gè)路徑給前端，這才是完整的上傳步驟。
第一步：上傳圖片，第二步：保存到服務(wù)器，并且生成路徑保存到數(shù)據(jù)庫(kù)，第三步：回傳前端，后臺(tái)圖片路徑，前端顯示圖片。

本文中使用了element-ui框架來(lái)幫助我完成前端展示工作。

上傳圖片

上傳圖片也有幾種方式，比如直接使用file控件上傳到指定地址，又或者是借助封裝好的上傳按鈕上傳圖片，如果是base64傳到后臺(tái)，還需要轉(zhuǎn)回圖片原格式加以保存，如果是二進(jìn)制圖片流則直接傳到服務(wù)器即可。
我使用的是element-ui框架里的el-upload組件進(jìn)行上傳，而且這個(gè)組件是隱藏的，不會(huì)顯示出來(lái)

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

上述參數(shù)解釋：
（1）class 上傳組件的樣式，也可以用于查找該組件
（2）action 傳值，必選參數(shù)，上傳的地址
（3）name 上傳文件字段名，后端在獲取文件時(shí)需要起一個(gè)名字，這個(gè)名字就在這里定義
（4）headers 設(shè)置上傳的請(qǐng)求頭部
（5） show-file-list 是否顯示已上傳文件列表，這里不顯示
（6） on-success 文件上傳成功時(shí)的鉤子，如果成功，則回傳圖片地址，顯示圖片將src傳入地址
（7） on-error 文件上傳失敗時(shí)的鉤子
（8）before-upload 上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。

我首先需要監(jiān)聽富文本點(diǎn)擊上傳圖片按鈕的事件：

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點(diǎn)擊上傳事件
         document.querySelector('.avatar-uploader input').click()
        } else {
         this.quill.format('image', false)
        }
       }
      }
     }
    }
   },

上面代碼當(dāng)中toolbar里的handlers就是監(jiān)聽點(diǎn)擊圖片按鈕事件，然后我們模擬點(diǎn)擊el-upload組件，就會(huì)彈出選擇文件的框，我們開始選擇文件進(jìn)行上傳。

當(dāng)后端處理好圖片后，我們拿到回傳的地址，在富文本光標(biāo)處插入img標(biāo)簽

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

如果小伙伴喜歡原生標(biāo)簽使用input標(biāo)簽file類型也是可以的，或者也可以借助JavaScript或者jQuery響應(yīng)點(diǎn)擊事件來(lái)傳文件也是可以噠！

總結(jié)

上傳圖片其實(shí)是一個(gè)很簡(jiǎn)單的過(guò)程，但是卻需要前后端來(lái)配合食用，味道才正宗。所以只學(xué)前端的小伙伴可以找個(gè)后端開發(fā)寫個(gè)接口啥的幫你回傳一個(gè)地址，或者干脆自己造個(gè)假的也行。

我一開始不是很清楚圖片到底怎么傳的，比如base64是什么，其實(shí)就是照片的一串字符串，這一串字符串就是照片，有的時(shí)候是可能存在把這一串base64字符串保存到數(shù)據(jù)庫(kù)的。但是大多數(shù)情況我們還是在數(shù)據(jù)庫(kù)中保存路徑，所以很多想保存圖片路徑的小伙伴們，可以參考上述代碼，下一篇我將結(jié)合Java來(lái)展示圖片保存的代碼是怎樣實(shí)現(xiàn)的，又是怎樣回傳圖片地址的，敬請(qǐng)期待吧！！

到此這篇關(guān)于VueQuillEditor富文本上傳圖片(非base64)的文章就介紹到這了,更多相關(guān)VueQuillEditor富文本上傳圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: