配合 element-ui 实现上传图片/视频到七牛 demo

[kele59]

配合 element-ui 实现上传图片/视频到七牛的方法
按照上面博客里的教程，亲测可以成功。

这个博客作者并不是我，非常感谢这个作者。
然后下面附上我自己根据这个博客实现的代码，添加了不少注释，去掉了统计字数逻辑。

<style lang="sass">
.quill-editor
  min-height: 500px

  .ql-container
    min-height: 500px

.ql-snow .ql-editor img
  max-width: 480px

.ql-editor .ql-video
  max-width: 480px
</style>

<template lang="pug">
.the_my_editor_container
  quill-editor(
    v-model="content" 
    ref="myQuillEditor" 
    :options="editorOption" 
  )

  //- 文件上传input 将它隐藏
  el-upload.upload-demo(
    :action="qnLocation" 
    :before-upload='beforeUpload' 
    :data="uploadData" 
    :on-success='upScuccess' 
    ref="upload" 
    style="display:none"
  )
    el-button#imgInput(
      size="small" 
      type="primary" 
      v-loading.fullscreen.lock="fullscreenLoading" 
      element-loading-text="插入中,请稍候"
    ) 点击上传

</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import Quill from 'quill'

const STATICDOMAIN = 'http://otq0t8ph7.bkt.clouddn.com/' // 图片服务器的域名，展示时使用
const STATVIDEO = 'http://otq0t8ph7.bkt.clouddn.com/'

@Component
export default class Editor extends Vue {
  content = '' // 文章内容
  editorOption = {
    placeholder: '请输入内容',
  }
  addRange = []
  uploadData = {}
  photoUrl = '' // 上传图片地址
  uploadType = '' // 上传的文件类型（图片、视频）
  fullscreenLoading = false

  $refs = {
    myQuillEditor: HTMLInputElement,
    imgInput: HTMLInputElement
  }

  // 上传七牛的actiond地址，http 和 https �不一样
  get qnLocation() {
    return location.protocol === 'http:' ? 'http://upload.qiniu.com' : 'https://up.qbox.me'
  }

  // 图片上传之前调取的函数
  // 这个钩子还支持 promise
  beforeUpload(file) {
    return this.qnUpload(file)
  }

  // 图片上传前获得数据token数据
  qnUpload(file) {
    this.fullscreenLoading = true
    const suffix = file.name.split('.')
    const ext = suffix.splice(suffix.length - 1, 1)[0]
    console.log(this.uploadType)
    if (this.uploadType === 'image') { // 如果是点击插入图片
      // TODO 图片格式/大小限制
      return this.$http('common/get_qiniu_token').then(res => {
        this.uploadData = {
          key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
          token: res.data
        }
      })
    } else if (this.uploadType === 'video') { // 如果是点击插入视频
      return this.$http('common/get_qiniu_token').then(res => {
        this.uploadData = {
          key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
          token: res
        }
      })
    }
  }

  // 图片上传成功回调   插入到编辑器中
  upScuccess(e, file, fileList) {
    console.log(e)
    this.fullscreenLoading = false
    let vm = this
    let url = ''
    if (this.uploadType === 'image') { // 获得文件上传后的URL地址
      url = STATICDOMAIN + e.key
    } else if (this.uploadType === 'video') {
      url = STATVIDEO + e.key
    }
    if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
      let value = url
      // API: https://segmentfault.com/q/1010000008951906
      // this.$refs.myTextEditor.quillEditor.getSelection();
      // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
      vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
      value = value.indexOf('http') !== -1 ? value : 'http:' + value
      vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法，插入URL
    } else {
      this.$message.error(`${vm.uploadType}插入失败`)
    }
    this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
  }

  // 点击图片ICON触发事件
  imgHandler(state) {
    this.addRange = this.$refs.myQuillEditor.quill.getSelection()
    if (state) {
      let fileInput = document.getElementById('imgInput')
      fileInput.click() // 加一个触发事件
    }
    this.uploadType = 'image'
  }

  // 点击视频ICON触发事件
  videoHandler(state) {
    this.addRange = this.$refs.myQuillEditor.quill.getSelection()
    if (state) {
      let fileInput = document.getElementById('imgInput')
      fileInput.click() // 加一个触发事件
    }
    this.uploadType = 'video'
  }

  // 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
  mounted() {
    // 为图片ICON绑定事件  getModule 为编辑器的内部属性
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
  }
}
</script>

[kele59]

改一下 STATICDOMAIN 变量，换成你自己的七牛配置的域名，
浏览器输入 STATICDOMAIN + key 就能访问你上传成功的图片/视频

这个只是客户端代码，还需要服务器实现一个接口，通过这个接口能获取七牛的 token 。
this.$http('common/get_qiniu_token') 这个方法换成你自己的获取token方法。

改完以上两点，亲测没问题。

[surmon-china]

@zaxlct 仔细看了，跳到了简书原作者，写的很清晰，其实主要用到两个东西：

1. 加一个按钮用于触发上传，可以用 html slot 或 quill.getModule("toolbar").addHandler 控制
2. 需要向编辑器插入内容时，使用getSelection 和insertEmbed插入内容

如果你的使用体验还不错，我觉得可以封装为一个“插件/模块”，发布，开放给用户吊起上传和数据输出的接口即可

[kele59]

@surmon-china 目前使用上没啥问题，上传图片也都稳定。能封装一个插件更好，非常支持啊！我觉得很多用户都需要这个功能吧，为了搞定这个我也花费了好几天。。233333.。。。

[zetianul]

富文本编辑器上传图片这个问题困扰了我好多天，刚刚解决，也是用的

加一个按钮用于触发上传，可以用 html slot 或 quill.getModule("toolbar").addHandler 控制

需要向编辑器插入内容时，使用getSelection 和insertEmbed插入内容

往toolbar中塞了一个按钮，图标用fontawsome，基本可以做到以假乱真，只不过我上传图片是调用的七牛的js sdk，要开个issue给别人提供一个参考吗。

[surmon-china]

const range = this.$refs.myTextEditor.quill.getSelection();
const imageUrl = qiniuUpload(image);
this.$refs.myTextEditor.quill.insertEmbed(range.index, 'image', imageUrl);

[surmon-china]

相关链接：

• http://www.jianshu.com/p/36b144b4cef8
• https://segmentfault.com/a/1190000009877910

[surmon-china]

@mingtail 自己试，自己找，@我也只是我帮你做这两件事，没什么标准答案。

[slevin57]

@surmon-china 我用原生的api配合编辑器实现了这个功能，想按你说的封装成一个『插件/模块』，当锻炼自己造福大众
不过之前没做过也没具体的头绪，就想试试，能给个教程链接之类的么，先谢了

[surmon-china]

@Patricklea 核心就是将对应 SDK 封装在一个 quill module 里，然后加上图标、事件、配置项，具体可以参考 quill module 部分的文档或以 README.md 底部推荐的第三方插件作为参考。

[slevin57]

@surmon-china 好，谢谢，我试下先。