引言：

• 富文本編輯器傳圖片會解碼成64位，非常長導致數據庫會報錯
• 第一種方法：將數據庫類型改成 mediumtext
• 第二種辦法：本文中的方法

說明，本周文所用語法糖為Vue3 setup語法，即<script setup>

思路

• 攔截富文本編輯器上傳圖片功能，即點擊按鈕將事件綁定到input或upload的上傳圖片上
• 將圖片上傳到自己服務器，并返回url地址
• 將url地址存到數據庫，顯示的時候直接映射

第一步：安裝 quill-image-extend-module

npm install quill-image-extend-module --save-dev

第二部：全局注冊 main.js

// 富文本編輯器
import { QuillEditor,Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {container,QuillWatch,ImageExtend} from "quill-image-extend-module";
Quill.register('modules/ImageExtend', ImageExtend)const app = createApp(App)
app.component('QuillEditor', QuillEditor)

第三步：組件引用 （引入我的部分代碼，不相關部分已去除）

// 說明 引入input是借助input的圖片上傳請求，來回顯到富文本編輯器里，按鈕是隱藏的。
<template><QuillEditorv-model:content="form.productParaImgs"contentType="html"theme="snow"ref="productParaImgsForm":options="productParaImgsEditorOption"@change="onEditorChange($event)"style="height:200px"></QuillEditor><inputtype="file"accept=".png,.jpg,.jpeg"@change="productParaImgsChange"id="productParaImgsUpload"style="display: none;border: 4px solid red"/>
</template><script setup>
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
const productParaImgsForm = ref(null);// 富文本編輯器 參數設置
const productParaImgsEditorOption = ref({placeholder: "請輸入",theme: "snow",modules: {ImageExtend: {  // 如果不作設置，即{}  則依然開啟復制粘貼功能且以base64插入name: 'img',  // 圖片參數名size: 3,  // 可選參數 圖片大小，單位為M，1M = 1024kbaction: '',  // 富文本服務器地址（不用）// response 為一個函數用來獲取服務器返回的具體圖片地址（不用）response: (res) => {},headers: (xhr) => {// 請求頭，攜帶tokenxhr.setRequestHeader('token', window.sessionStorage.getItem('token'))},},// 核心步驟，在富文本點擊圖片按鈕的一刻判斷，走input的change事件，即-將圖片上傳到服務器，再返回url地址用來保存。toolbar: {container: container,  // container為工具欄，此次引入了全部工具欄，也可自行配置handlers: {'image': function (value) {  // 如果點擊了富文本的圖片按鈕if (value) {// 觸發 input的事件 （productParaImgsUpload為input的id）document.querySelector("#productParaImgsUpload").click();} else {this.quill.format("image", false);}}}}}
})// input按鈕綁定的change事件
const productParaImgsChange = async (e) => {
// 后端用 MultipartFile file 來接收文件，前端則用formData來封裝。let formData = new FormData();let file = e.target.files[0]; // 固定寫法，可自行打印查看formData.append('file', file);// requestUitl.post 是我封裝的請求，可自行改成ajaxlet result = await requestUitl.post("/sys/product/uploadImage", formData);if (result.data.code == 647) {// Vue3 setup 語法 productParaImgsForm.value.getQuill()// vue2用 this.$ref.productParaImgsForm.quilllet quill = productParaImgsForm.value.getQuill() // 獲取這個富文本的光標//光標位置let length = quill.getSelection().index; // 插入圖片 圖片地址是拼接的 // getServerUrl()是你的請求頭，替換即可// result.data.src 是后端返回的urlquill.insertEmbed(length, "image", getServerUrl() + result.data.src);  // 調整光標內容后面quill.setSelection(length + 1); }
}
</script>

后端返回類型參考

Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);  // 文件名
dataMap.put("src", "image/product/" + newFileName); // 請求路徑，拼接getServerUrl()即可用

請求封裝參考

export function post(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}
export default {post,getServerUrl
}