使用Vue-Quill-Editor上传图片会默认把图片转为base64编码,导致后台存储不了,所以我们需要修改上传图片组件.这里我使用的是官网的增强模块
quill-image-extend-module,https://www.kancloud.cn/liuwave/quill/1434141具体使用步骤为:
安装依赖:
npm install quill-image-extend-module --save-dev
在页面js代码中引入:
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
接着写配置:
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: updateUrl,//这里写入请求后台地址 例如:"http://xxx.xxx.xxx.xxx:xxx/api/file/upload/indexFile",
response: (res) => {
return res.info//这里写入请求返回的数据,也就是一个图片字符串
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id)
}
}
}
}
}
}
}
}
推荐多看看官网,官网上面比较详细,可以看的仔细一点