关于前端:富文本vuequilleditor结合element-UIupload做图片上传至七牛云服务器含node后端

41次阅读

共计 6715 个字符，预计需要花费 17 分钟才能阅读完成。

思路：在富文本配置中劫持图片点击事件，该事件中点击 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);
})

正文完
前端
发表至： 前端
2021-07-20
 0
关于前端:vuecli5-webpack5-vue26x-打包优化
关于前端:十天自制软渲染器DAY-01图形学学习建议与环境搭建
种树专业户树业有专攻
关于前端:提高-WooCommerce-商店速度的-10-种方法