富文本vue-quill-editor结合elementUI--upload上传图片到七牛云服务器（含节点后台）

思路：劫持富文本配置中的图片点击事件，在该事件中点击elementUI中的上传上传组件（）调用本地上传服务器操作，将上传组件隐藏在文本流中，将上传组件上传的服务器更改为七牛云，并将返回值中的key和hash拼接到七牛云上线图片地址被回显并分配给富文本组件。完成图片上传和回显功能。1.封装富文本组件quill.vue(1)template(2)script(3)style.quill-editor{height:300px;}.editor{line-height:normal!important;高度：500像素；}。ql-snow.ql-tooltip[data-mode="link"]::before{content:"请输入链接地址:";}.ql-snow.ql-tooltip.ql-editinga.ql-action:：在{右边框：0px之后；内容：“保存”；padding-right:0px;}.ql-snow.ql-tooltip[data-mode="video"]::before{content:"请输入视频地址:";}.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"]::在{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[数据值="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::b前{内容：“标准字体”；}.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:"seriffont";}.ql-snow.ql-picker.ql-font.ql-picker-label[数据-value="monospace"]::before,.ql-snow.ql-picker.ql-font.ql-picker-item[data-value="monospace"]::before{content:"monospacefont";}2.父组件中的引用(1)temple//fMessage和contentmsg是类似的修饰功能。要将原始内容放入，必须从父组件传入。（2）script//声明子组件组件：{SquillEditorQiniu//富文本boxuploadcomponent}//methodmethods，获取子组件数据getContent(contentmsg){this.content=contentmsg}3.节点获取tokenrouter.get('/token',(req,res,next)=>{constaccessKey='********'//这里填写七牛云的accessKeyconstsecretKey='********'//这里填写七牛云的secretKeyvarmac=newqiniu.auth.digest.Mac(accessKey,secretKey)var选项={scope:'blogostest',//这里填写七牛云的空间名称expires:7200//七牛云的有效时长}varputPolicy=newqiniu.rs.PutPolicy(options);varuploadToken=putPolicy.uploadToken(mac);让_res=res；//该接口返回的数据let_data={code:200,msg:uploadToken}setTimeout(()=>{//返回操作结果到前台resJson(_res,_data)},500);})4.纯节点上传图片const{pool,router,resJson}=require('../connect')varfs=require('fs');//引入七牛模块varqiniu=require("qiniu");//上传varbucket='blogostest';varimageUrl='qvti2smmh.hn-bkt.clouddn.com';//你的域名varaccessKey='********';varsecretKey='*******';varmac=newqiniu.auth.digest.Mac(accessKey,secretKey);varoptions={scope:bucket,};varputPolicy=newqiniu.rs.PutPolicy(options);varuploadToken=putPolicy.uploadToken(mac);varconfig=newqiniu.conf.Config();config.zone=qiniu.zone.Zone_z2;//图片上传router.get('/upload',function(req,res,next){//1.改成post请求参数获取方式需要改letimg={img:req.query.imgurl//2.改成req.body.imgurl}let_data,_res=resvarlocalFile=img.img;varformUploader=newqiniu.form_up.FormUploader(config);varputExtra=newqiniu.form_up.PutExtra();varkey=img.img.split('/').slice(-1)[0];//文件上传formUploader.putFile(uploadToken,key,localFile,putExtra,function(respErr,respBody,respInfo){if(respErr){throwrespErr;}if(respInfo.statusCode==200){letaddress='http://'+imageUrl+'/'+key_data={code:0,msg:address}}else{_data={code:-1,msg:'上传失败'}}setTimeout(()=>{//返回操作结果到前台resJson(_res,_data)},500);});})module.exports=router;