使用wangeditor富文本插件，自定义上传到七牛

需要做的内容就是将富文本的内容，通过自己的上传方式去上传到服务端
1，wangeditor官方文档

https://www.wangeditor.com/

2，官方有个demo可以快速堆进项目

https://www.wangeditor.com/v5/for-frame.html#demo

3，我这里主要是跟资源有关，所以定位到上传相关的地址
上传图片：

https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87

上传视频：

https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E8%A7%86%E9%A2%91

4，这里富文本编译器是有自带上传的，如果没什么要求，比如没有什么大文件什么的，直接用自带的api配置，简单快捷，将接口地址放上就好了,但我这里不太行

5，打开七牛的api，我这里的版本是3.3.2版本的qiniu.js
下面贴上qiniujs的版本地址，

https://unpkg.com/browse/qiniu-js@1.0.24/dist/qiniu.min.js

七牛云地址

https://developer.qiniu.com/kodo/6889/javascript-sdk-historical-document-2-x

可以根据自己使用的版本，去找对应的api，主要分为1.0和2.0版本，自定义上传其实就是那个方法，其他的触发上传，都是大同小异，
七牛有2种实现，一种是api，就是比如视频分片上传，他可以让你自己调api，去上传
第二种是直接使用sdk，也就是封装好的api，直接调方法，自动进行分片

6，坑点：
1，推荐使用sdk，api的参数有点多，且费时费力
2，网上大多数qiniu都是1.0版本的，用之前一定要确定版本
3, 1,0版本的qiniujs，引用全局对象是Qiniu,2.0版本是小写qiniu
4, 1.0使用的初始化sdk是uploader(）,2.0版本是upload()
5, upload()里面是参数，不是对象，排查2小时，脑子犯浑

7，奉上我的3.0版本qiniu上传sdk,其实这样一想，好简单，我游离在多个版本和api间不能自拔

<template>
  <div class="upload">
    <div id="pickfiles" style="border: 1px solid #ccc;">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
    </div>
  </div>
</template>

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


export default {
  components: { Editor, Toolbar },
  data() {

    let self = this
    return {
      editor: null,
      html: '<p>hello</p>',
      token: '服务端上传需要的验证信息', // 上传验证信息
      toolbarConfig: {
        excludeKeys: ['fullScreen']
      },
      url: '服务端上传接口',
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              console.log(file)
              self.upload()
              //  insertFn(url, poster)
            }
          },
          // 上传视频
          uploadVideo: {
            async customUpload(file, insertFn) {
              console.log(file, insertFn)
              self.uploadVideo(file)
              // self.getUploadUrl()
              // file 即选中的文件
              // 自己实现上传，并得到视频 url poster
              // 最后插入视频
              // insertFn(url, poster)
            }
          }
        }

      },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    upload() {
    },
    uploadVideo(file) {
      // 集成分片上传api
      let obj ={
        // 上传配置
        file: file, // 上传的文件
        key: file.name, // 文件资源名
        token: this.token, // 上传验证信息
        // config: {     // 内容为可选配置
        //   useCdnDomain: true, // 是否使用cdn加速域名
        //   disableStatisticsReport: false, // 是否禁用日志报告
        //   uphost: [], //上传的host
        //   upprotocol: 'https', // 上传域名协议
        //   region: null, // 选择上传域名区域
        //   retryCount: 3, // 上传自动重试次数
        //   concurrentRequestLimit: 3, // 分片上传并发请求量
        //   checkByServer: false, // 是否开启服务端文件签名校验
        //   checkByMD5: false, // 是否开启MD5校验，在断点续传时，开启MD5校会将已上传的分片与当前分片进行MD5值对比，若不一致，则重传该分片，避免使用错误的分片，读取分片内容并计算md5会消耗一些时间，默认为false
        //   forceDirect: false, // 是否上传全部采用直传方式
        //   chunkSize: 4, // 分片上传时每片的大小，默认为4，最大不超过1024，单位MB
        //   debugLogLevel: 'OFF', // 允许程序在控制台输出日志
        // },
        // putExtra: {  // 内容为可选配置
        //   fname: '', // 文件原始文件名
        //   customVars: {}, // 自定义变量
        //   metadata: {}, //防止自定义meta
        //   mimeType: '', // 所传的文件类型
        // },
      }
      let observable = qiniu.upload(obj.file,obj.key,obj.token)
      this.uploader = observable
      observable.subscribe({
        next: (result) => {
          // 主要用来展示进度
          console.log(result,'进度')
        },
        error: (errResult) => {
          // 失败报错信息
          console.log(errResult,'上传错误')
        },
        complete: (result) => {
          // 接收成功后返回的信息
          console.log(result,'成功')
        }

      })