富文本vue-quill-editor结合element UI--upload做图片上传至七牛云服务器（含node后端）
Posted 抱了一束小花花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了富文本vue-quill-editor结合element UI--upload做图片上传至七牛云服务器（含node后端）相关的知识，希望对你有一定的参考价值。
思路：在富文本配置中劫持图片点击事件，该事件中点击elementUI中的上传组件upload（<el-upload>)，唤起本地上传服务器操作，将upload组件在文本流中隐藏，upload组件上传的服务器改为七牛云，返回的值中的key和hash进行拼接成七牛云线上图片地址回显赋值至富文本组件中。完成图片上传及回显功能。
1、封装富文本组件
quill.vue
（1）template
<template>
<!-- 这是一个富文本的组件-->
<div class="editor_wrap">
<el-upload
class="avatar-uploader"
action="http://upload-z2.qiniup.com" // 上传的服务器地址（服务器所在的区域不同会有变化）
:accept="\'image/*\'" // 接收的图片类型
:data="qiniuForm" // 追加的数据
:show-file-list="false" // 是否显示已上传文件列表
:on-success="uploadEditorSuccess"
:on-error="uploadEditorError"
:before-upload="beforeEditorUpload">
</el-upload>
<el-row v-loading="quillUpdateImg"> //v-loading是上传动画
<quill-editor :options="editorOption" //绑定富文本编辑配置项
class="editor"
v-model="content"
ref="QuillEditor"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)">
</quill-editor>
</el-row>
</div>
</template>
（2）script
<script>
import { quillEditor } from \'vue-quill-editor\'
import \'quill/dist/quill.core.css\'
import \'quill/dist/quill.snow.css\'
const toolbarOptions = [
[\'bold\', \'italic\', \'underline\', \'strike\'], // 加粗 斜体 下划线 删除线 -----[\'bold\', \'italic\', \'underline\', \'strike\']
[\'blockquote\', \'code-block\'], // 引用 代码块-----[\'blockquote\', \'code-block\']
[{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
[{ list: \'ordered\' }, { list: \'bullet\' }], // 有序、无序列表-----[{ list: \'ordered\' }, { list: \'bullet\' }]
[{ script: \'sub\' }, { script: \'super\' }], // 上标/下标-----[{ script: \'sub\' }, { script: \'super\' }]
[{ indent: \'-1\' }, { indent: \'+1\' }], // 缩进-----[{ indent: \'-1\' }, { indent: \'+1\' }]
[{ direction: \'rtl\' }], // 文本方向-----[{\'direction\': \'rtl\'}]
[{ size: [\'small\', false, \'large\', \'huge\'] }], // 字体大小-----[{ size: [\'small\', false, \'large\', \'huge\'] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: [] }], // 字体种类-----[{ font: [] }]
[{ align: [] }], // 对齐方式-----[{ align: [] }]
[\'clean\'], // 清除文本格式-----[\'clean\']
[\'image\', \'video\'] // 链接、图片、视频-----[\'link\', \'image\', \'video\']
]
export default {
name: \'UE\',
token: \'\',
components: {
quillEditor
},
props: [\'fMessage\'], //接收父组件参数
data: function () {
return {
num: 0,
quillUpdateImg: false,
content: ``, // 富文本编辑器默认内容
editorOption: {
// 富文本编辑器配置
modules: {
// 工具栏定义的
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
\'image\': function (value) {
if (value) {
document.querySelector(\'.editor_wrap .avatar-uploader input\').click()
} else {
this.quill.format(\'image\', false)
}
}
}
}
},
// 主题
theme: \'snow\',
placeholder: \'请输入内容\'
},
qiniuForm: {
\'key\': new Date().getTime() + \'\' + Math.floor(Math.random() * 1000), // 上传七牛云的key值防止重复
\'token\': sessionStorage.token, // 后端生成的token
\'domain\': \'http://qvti2smmh.hn-bkt.clouddn.com\' // 你的七牛云域名
}
}
},
methods: {
// 上传图片之前
beforeEditorUpload (res, file) {
// 显示上传动画
this.quillUpdateImg = true
},
// 上传图片成功
uploadEditorSuccess (res, file) {
// 拼接出上传的图片在服务器的完整地址
let imgUrl = this.qiniuForm.domain + \'/\' + res.key
// 重置上传文件key，为下次上传做好准备，若上面的没用可以在函数中重置
this.qiniuForm.key = new Date().getTime() + \'\' + Math.floor(Math.random() * 1000)
// 获取富文本组件实例
let quill = this.$refs.QuillEditor.quill
// 获取光标所在位置
let length = quill.getSelection().index
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, \'image\', imgUrl)
// 调整光标到最后
quill.setSelection(length + 1)
// 取消上传动画
this.quillUpdateImg = false
},
// 上传图片失败
uploadEditorError (res, file) {
// 页面提示
// Notification.error({
// message: \'上传图片失败\'
// })
console.log(\'失败！\')
// 取消上传动画
this.quillUpdateImg = false
},
onEditorChange ({editor, html, text}) {
this.content = html
this.$emit(\'contentmsg\', html) //将子组件的内容传给父组件
},
onEditorFocus () {
},
onEditorReady () {
},
onEditorBlur () {
}
},
computed: {
editor () {
return this.$refs.QuillEditor.quill
}
},
mounted: function () {
setTimeout(() => { this.content = this.fMessage }, 1100) // 将父组件传过来的内容赋值给子组件，挂载时数据未传过来所以用setTimeout延时执行赋值操作
// this.content = this.fMessage
}
}
</script>
（3）style
.quill-editor {
height: 300px;
}
.editor {
line-height: normal !important;
height: 500px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
2、父组件中引用
（1）temple
// fMessage和contentmsg是为类似修改功能中要将原本的内容放进去，就要从父组件中传进去
<squill-editor-qiniu :fMessage="ccontent" v-model="content" @contentmsg=\'getContent\'></squill-editor-qiniu>
（2）script
// 声明子组件
components: {
SquillEditorQiniu // 富文本框上传组件
}
// 方法methods中，获取子组件数据
getContent (contentmsg) {
this.content = contentmsg
}
3、node获取token
router.get(\'/token\', (req, res, next) => {
const accessKey = \'********\' //这里填写七牛云的accessKey
const secretKey = \'********\' //这里填写七牛云的secretKey
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
var options = {
scope: \'blogostest\', //这里填写七牛云空间名称
expires: 7200 //七牛云的有效时长
}
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
let _res = res;
// 该接口返回的数据
let _data = {
code: 200,
msg: uploadToken
}
setTimeout(() => {
//把操作结果返回给前台页面
resJson(_res, _data)
}, 500);
})
4、纯node上传图片
const { pool, router, resJson } = require(\'../connect\')
var fs = require(\'fs\');
// 引入七牛模块
var qiniu = require("qiniu");
//要上传的空间名
var bucket = \'blogostest\';
var imageUrl = \'qvti2smmh.hn-bkt.clouddn.com\'; // 你的域名名称
var accessKey = \'*******\';
var secretKey = \'*******\';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: bucket,
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z2;
// 图片上传
router.get(\'/upload\', function(req, res, next){ // 1.改为post请求参数获取方式需要改
let img = {
img: req.query.imgurl // 2.改为 req.body.imgurl
}
let _data, _res=res
var localFile = img.img;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
var key=img.img.split(\'/\').slice(-1)[0];
// 文件上传
formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,
respBody, respInfo) {
if (respErr) {
throw respErr;
}
if (respInfo.statusCode == 200) {
let address = \'http://\' + imageUrl + \'/\' + key
_data = {
code: 0,
msg: address
}
} else {
_data = {
code: -1,
msg: \'上传失败\'
}
}
setTimeout(() => {
//把操作结果返回给前台页面
resJson(_res, _data)
}, 500);
});
})
module.exports = router;以上是关于富文本vue-quill-editor结合element UI--upload做图片上传至七牛云服务器（含node后端）的主要内容，如果未能解决你的问题，请参考以下文章