关于前端:富文本vuequilleditor结合element-UIupload做图片上传至七牛云服务器含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 = 'ZfDWvo39oY-r6Exgz6NZTNlhbTJSuErVlUDuQaPe'   //这里填写七牛云的accessKey
  const secretKey = 'RLUv6WzrZkxc_7PtAIhfXoqn7dxAroNEqvCo2BCH'   //这里填写七牛云的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);
})