wangEditor 实现上传图片到阿里云OSS

最近做了一个后台管理系统，里面用到了wangEditor富文本编辑器。里面实现了图片上传到阿里云OSS的功能，现总结一下用法。

新建oss.js文件

import { OSS_URL } from '@/utils/constants'
import CommonServer from '@/api/common'
import axios from 'axios'
import moment from 'moment'

// 文件扩展名提取
export function fileType (fileName) {
  return fileName.substring(fileName.lastIndexOf('.') + 1)
}

/**
 * oss路径定义
 * @param file
 */
export function ossPath (file) {
  const folder = moment().format('YYYY-MM-DD')
  if (file.name) {
    return `admin/${folder}/${fileType(file.name)}/${file.name}`
  } else {
    return `admin/${folder}/html/${moment().format('YYYY-MM-DD-HH-mm-ss')}.html`
  }
}

export function ossUpload (file) {
  return new Promise((resolve, reject) => {
    CommonServer.getOssSign().then((res) => {
      const { accessid, policy, signature } = res
      const formData = new FormData()
      const key = ossPath(file)
      formData.append('key', key)
      formData.append('OSSAccessKeyId', accessid)
      formData.append('policy', policy)
      formData.append('signature', signature)
      formData.append('success_action_status', '200')
      formData.append('file', file)
      axios.post(OSS_URL, formData).then((res) => {
        const { status } = res
        if (status === 200) {
          const data = {
            url: `${OSS_URL}/${key}`,
            type: file.name ? fileType(file.name) : 'html'
          }
          resolve(data)
        } else {
          reject(res)
        }
      }).catch(err => {
        reject(err)
      })
    }).catch(err => {})
  })
}

新建Editor.vue文件

<template>
  <div class="editor-wrapper">
    <div ref="editor"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  import { ossUpload } from '@/utils/oss'
  import { isUrl } from '@/utils'
  import CommonServer from '@/api/common'

  export default {
    name: 'Editor',
    props: {
      html: {
        required: true,
        type: String,
        default: ''
      }
    },
    data () {
      return {
        menus: [
          // 'head',  // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          // 'emoticon',  // 表情
          'image', // 插入图片
          // 'table',  // 表格
          // 'video',  // 插入视频
          // 'code',  // 插入代码
          'undo', // 撤销
          'redo' // 重复
        ],
        editorContent: ''
      }
    },
    mounted () {
      this.initEditor()
    },
    watch: {
      html (val, oldVal) {
        if (val) {
          this.getHtml()
        }
      }
    },
    beforeDestroy () {
      this.editor && this.editor.txt.clear()
    },
    methods: {
      // 初始化编辑器
      initEditor () {
        this.editor = new E(this.$refs.editor)
        this.editor.customConfig.menus = this.menus // menu菜单
        this.editor.customConfig.customUploadImg = async (files, insert) => {
          const res = await ossUpload(files[0])
          insert(res.url)
          this.$message.success('上传成功')
        }
        this.editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        this.editor.create()
        this.getHtml()
      },
      // 获取html
      async getHtml () {
        if (!this.html) return
        let html = this.html
        if (isUrl(this.html)) {
          const res = await CommonServer.getHtml(this.html)
          html = res.data
        }
        this.$nextTick(() => {
          this.editorContent = html
          this.editor.txt.html(html)
        })
      },
      // 获取编辑器内容
      getContent () {
        console.log(this.editorContent)
        // this.$emit('getContent', editor.txt.html())
      },
      // 清除内容
      clearHtml () {
        this.editor && this.editor.txt.clear()
      }
    }
  }
</script>

页面引入对应组件即可使用。同样上传腾讯云OSS也是同样的处理方式。