Vue爬坑之旅(二十一):vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

一、全局注册：main.js

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)

二、在组件中使用editor.vue

以上流程是由获取文件对象，然后将文件对象传至事先封装好的unloadImg方法中，如果上传成功，则回调方法中返回图片的key，再将拼接的图片插入vue-quill-editor的光标处。

三、qiniu_unload.js将图片上传至七牛

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
}

结果展示：

裁剪工具用的vue-cropper，本文不做详细介绍。

其他链接：php接入七牛云api、在七牛云建对象存储用于上传图片

注意事项

1、vue-quill-editor插件quill-image-resize-module 报错解决方法

解决方式就是修改wabpack配置
webpack.dev.conf.js
webpack.prod.conf.js 添加上即可解决问题，webpack.dev.conf.js是解决本地运行的问题，webpack.dev.conf.js是解决打包运行出错。

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