vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

import Vue from ‘vue‘
import VueQuillEditor, { Quill } from ‘vue-quill-editor‘
import { ImageDrop } from ‘quill-image-drop-module‘
import ImageResize from ‘quill-image-resize-module‘
import ‘quill/dist/quill.core.css‘
import ‘quill/dist/quill.snow.css‘
import ‘quill/dist/quill.bubble.css‘
Quill.register(‘modules/imageDrop‘, ImageDrop)
Quill.register(‘modules/imageResize‘, ImageResize)
 
Vue.use(VueQuillEditor)

import {createAPI, addAccessToken} from ‘@/utils/request‘
import storeLocal from ‘store‘
// import qs from ‘qs‘
let uploadToken = storeLocal.get(‘imgtoken‘) || ‘abcdefg‘// 从本地获取图片上传凭证
let imgcache = ‘‘
let f1cache = ‘‘
let f2cache = ‘‘
// 上传图片
function unloadImg (data, f1, f2, boot) {
  imgcache = data
  f1cache = f1
  f2cache = f2
  const formdata = new FormData()
  formdata.append(‘file‘, data)
  formdata.append(‘key‘, ‘img_‘ + new Date().getTime()) // 文件名
  formdata.append(‘token‘, uploadToken)
  addAccessToken(‘no_check‘)// 由于七牛云token失效返回401与本地后台token失效code码一致，因此在此处传值申明不验证本地登录
    .post(‘http://upload-z2.qiniup.com/‘, formdata, {
      validateStatus: status => status === 200
    })
    .then(reponse => {
      let obj = {
        type: true,
        res: reponse.data.key
      }
      f1(obj)// 成功回调
    })
    .catch((response) => {
      if (boot) { // 拦截，防止死循环
        let obj = {
          type: false,
          res: response.data.error
        }
        f2(obj)// 失败回调
      }
      if (response.status === 401) { // 上传的图片token失效
        getTokenAgain()// 获取新的token
      }
    })
}
 
// 重新请求token
function getTokenAgain () {
  addAccessToken()
    .post(createAPI(‘files/get_token‘), ‘‘, {
      validateStatus: status => status === 200
    })
    .then(reponse => {
      uploadToken = reponse.data.data.unload_token
      storeLocal.set(‘imgtoken‘, uploadToken)
      unloadImg(imgcache, f1cache, f2cache, 1)
    })
    .catch((response) => {
      return false
    })
}
 
export {
  unloadImg
}

new webpack.ProvidePlugin({
      ‘window.Quill‘: ‘quill/dist/quill.js‘,
      ‘Quill‘: ‘quill/dist/quill.js‘
    })