1.添加两个属性一个是useCustomImageHandler,一个是@image-added="savePicHandle"
<el-form-item label="内容">
<vue-editor v-model="form.content" useCustomImageHandler
placeholder="请输入内容" maxlength="1000" autosize type="textarea" @image-added="savePicHandle"
@image-removed="removedPicHandle"
/>
</el-form-item>
2.方法,找到自己上传图片的方法路径,直接替换
uploadAction(this.url.upload, formData).then(res => {
这里就可以
// 保存图片实现方法
savePicHandle(file, Editor, cursorLocation, resetUploader) {
console.log('2222222222222222222222222', file, Editor, cursorLocation)
// 引入包内自带的formdata
const formData = new FormData();
// 将前端传入formdata中数据名为file的数据追加到formdata,与上篇文章的图片上传相同
formData.append("file", file);
// 使用我们上篇文章定义好的图片上传接口,将formdata数据传到后台,并接收返回的数据到res
uploadAction(this.url.upload, formData).then(res => {
// 找到返回数据中的图片链接
let url = 'http://localhost:8891' + res.url;
// 用vue-editor包自带的插入方法:在光标所在位置,插入一张图片,图片的地址是url
Editor.insertEmbed(cursorLocation, "image", url);
// 刷新(重置)编辑器
resetUploader();
}).catch(err => {
console.error('保存图片错误: ', err)
})
},
removedPicHandle(image) {
console.log(image)
},