富文本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;