vue-quill-editor默認的圖片插入方式，是直接將圖片轉成base64編碼，這樣的結果是整個富文本的html片段十分冗余。我們的服務器端接收的post的數據大小都是有限制的，這樣的話導致提交失敗，就算不提交失敗，大量的數據存入數據庫也不是好事。為了解決這個問題，我考慮了兩個方案，換一個富文本編輯框框架，另一個是修改vue-quill-editor的框架代碼。?
百度一番，果斷開始嘗試修改框架代碼框架，因為換個富文本編輯框有太多不確定性，增加測試成本。

解決方式
如上圖，我們點擊圖片，不是把圖片的base64編碼插入富文本框，而是將本地文件上傳到我的文件上傳地址（我這里默認提供post方式上傳圖片，并且返回圖片地址），將圖片以html方式插入在富文本框內。這樣由原來的圖片數據優化為了<img src="...">的html格式數據。

template部分

vue data部分

vue method部分:

總結

以上是生活随笔為你收集整理的element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。