VUE基于ueditor直接上传图片到oss服务器（前后端分离不

因为公司需要用到百度的富文本编辑器，并且要用到上传图片的功能。但是因为官方的例子是前后端不分离的，上传功图片到oss需要后端配置一堆东西。在网上看到很多demo也是需要配置后端代码了，基本没看到符合自己的需求，我的需求很简单，不碰任何的后端代码，把上传图片的功能独立出来直接上传oss并返回图片的url。经过对源码的一顿骚操作之后终于改好了，咔咔咔。。。。

废话不多说先上效果图

1.jpg

下面说下具体步骤

1.到git@github.com:LiveJie/vue-ueditor.git 下载ueditor

2.在项目中引入下载的ueditor根据项目不同在适当的地方引入vue2的话应该是在static引入 我现在的版本应该是vue3 static在public下面

2.jpg

3.在index.html引入ueditor主要文件(本人试过在组件里面request但是会一直卡死...)

3.jpg

4.配置ueditor.config.js文件 （需要配置一个oss的地址，还有一个是带在header的token名字）因为公司目前只需要上传单张图片的支持 所以只做了上传单张图片的处理

4.jpg

5.现在准备编写组件 新建一个Ueditor.vue文件写入以下内容

<template>
  <div id="editor" type="text/plain" style="width:1024px;height:500px;" />
</template>

<script>
/**
 * value 父组件绑定值
 * changeContent 父组件改变绑定value的事件
 */
export default {
  name: 'Ueditor',
  props: {
    value: {
      type: String,
      default: null
    },
    changeContent: {
      type: Function,
      default: null
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
    window.UE.delEditor('editor')
    this.UE = window.UE.getEditor('editor')
    window.ueMessage = this.$message
    const _this = this
    this.UE.addListener('contentChange', function(editor) {
      _this.getContent()
    })
    setTimeout(() => {
      this.value && this.setContent(this.value)
    }, 1000)
  },
  methods: {
    // 获取文本内容
    getContent() {
      this.changeContent(this.UE.getContent())
    },
    // 设置文本内容
    setContent(content) {
      this.UE.setContent(content)
    }
  }
}
</script>

<style scoped>
</style>

6.引用组件

<template>
  <div class="createNews-module">
        <Ueditor ref="ueditor" v-model="ueditorContent" :change-content="changeContent" />
  </div>
</template>
<script>
import Ueditor from '@/components/Ueditor'
export default {
  components: {Ueditor },
  data() {
    return {
      ueditorContent: '',
    }
  },
  
  mounted() {
   
  },
  methods: {
    // 改变富文本编辑器的内容
    changeContent(content) {
      this.ueditorContent = content
    }
}

到了这里的话基本就可以直接通过前端上传图片到oss了