在使用vue-quill-editor富文本的时候,对于图片的处理经常是将图片转换成base64,再上传数据库,但是base64不好存储。
原理:首先将图片上传服务器,再将图片插入到富文本中,同时光标后移一位。(其实就是将富文本中的图片上传改成了自己写上传)
1,安装插件
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
2.布局:
<quill-editor
@change="onEditorBlur($event)"
id="desc"
ref="quill"
v-model="desc"
:options="editorOption"
></quill-editor>
<input type="file" @change="change" id="upload" style="display:none;" />
3:,options的值,放在vue存放数据的data中
editorOption: {
placeholder: '此处输入赛事规程',
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: UploadImage,//上传的服务器地址
response: res => {
return res.data
}
},
toolbar: {
container: container,
handlers: {
image: function(value) {
if (value) {
document.querySelector('#upload').click()----------------#upload即为自己写的上传,可以使用最简单的input
} else {
this.quill.format('image', false)
}
}
}
}
}
},
4,上传(我们后端上传使用的FormData,只有最后得到地即可)
change(e) {
let file = e.target.files[0]
const formData = new FormData()
formData.append('file', file)
------下面可以根据后端写的上传接口进行传递参数
UploadImage(formData)
.then(res => {
let quill = this.$refs.quill.quill------------$ref中得到quill后再往下找quill,否则查找光标位置会报错。
if (res.code === 0) {
const formdata = _.extend({}, this.formdata)
let length = quill.getSelection().index//光标位置
// 插入图片 图片地址
quill.insertEmbed(length, 'image', res.data)
// 调整光标到最后
quill.setSelection(length + 1)//光标后移一位
}
})
.catch(err => {
console.error(err)
})
}