制作企业网站需要注意的事项,如何增加网站点击量,西安网站建设案例,北京 网站设计飞沐引言#xff1a; 富文本编辑器传图片会解码成64位#xff0c;非常长导致数据库会报错第一种方法#xff1a;将数据库类型改成 mediumtext第二种办法#xff1a;本文中的方法 说明#xff0c;本周文所用语法糖为Vue3 setup语法#xff0c;即script setup 思路
拦… 引言 富文本编辑器传图片会解码成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的图片上传请求来回显到富文本编辑器里按钮是隐藏的。
templateQuillEditorv-model:contentform.productParaImgscontentTypehtmlthemesnowrefproductParaImgsForm:optionsproductParaImgsEditorOptionchangeonEditorChange($event)styleheight:200px/QuillEditorinputtypefileaccept.png,.jpg,.jpegchangeproductParaImgsChangeidproductParaImgsUploadstyledisplay: none;border: 4px solid red/
/templatescript 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, // 可选参数 图片大小单位为M1M 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的iddocument.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 后端返回类型参考 MapString, 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
}
