改造vue-quill-editor实现图片上传 根据NextBoy发布的教程写的完整例子，原文地址：NextBoy/skill#2
需要引入element和vue-quill-editor
test.vue内容：
<template>
<div>
<!--使用element上传图片，隐藏即可-->
<!--name要看后台配置，后台配置如果是文件上传的话就改成file-->
<el-upload
class="avatar-uploader"
hidden
:headers="header"
:action="serverUrl"
name="file"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload">
</el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="quillUpdateImg">
<quill-editor
v-model="detailContent"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
</el-row>
</div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
]
export default {
name: "test",
data() {
return {
serverUrl: '/file/upload', // 这里写你要上传的图片服务器地址
header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
detailContent: '', // 富文本内容
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
},
methods: {
// 上传图片前
beforeUpload(file) {
let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
if (testmsg == "jpg" || testmsg == "png" || testmsg == "jpeg" || testmsg == "bmp" || testmsg == "gif") {
//显示loading动画
this.quillUpdateImg = true;
return true;
} else {
this.$message.info("请选择正确的图片格式");
return false;
}
},
// 上传图片成功
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == '200' && res.url) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false
},
// 上传图片失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false
this.$message.error('图片插入失败')
},
onEditorReady() {
},
onEditorChange() {
},
},
}
</script>
<style scoped>
</style>