vue2+wangeditor5+oss上传图片

前提

《1》版本:vue2、wangeditor5
《2》场景:编辑器中需要oss上传图片
《3》参考资料(wangeditor5):https://www.wangeditor.com/

editor.vue

     <div>
         <!-- 工具栏 -->
         <Toolbar
             :editor="editor"
             :defaultConfig="toolbarConfig"
         />
         <!-- 编辑器 -->
         <Editor
             :defaultConfig="editorConfig"
             v-model="html"
             @onChange="onChange"
             @onCreated="onCreated"
         />
     </div>
       

editor.js

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import ossUpload from '@/util/ossUpload.js'。//封装的oss上传,在下面有写
export default {
   components: { Editor, Toolbar },//组件引入
   data() {
   		html:'<div>这是编辑器中显示的内容</div>',
  	 		editor: null, //实例
  	 	    toolbarConfig: {
              // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
              // excludeKeys: [ /* 隐藏哪些菜单 */ ],
          	},
           editorConfig: {
               placeholder: '请输入内容...',
               // autoFocus: false,
               
               // 所有的菜单配置，都要在 MENU_CONF 属性下
               MENU_CONF: {
                   uploadImage: {
                       customUpload:    //自定义上-oss
                           async (file, insertFn) => {
                               const resultUrl = await ossUpload(file, file.name)
                               insertFn(resultUrl)
                           }
                   }
               }
           },
           methods:{
           	        onCreated(editor) {
   			            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
   			        },
   			        onChange(editor) {
   			            console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
   			        },
           },
           beforeDestroy() { //销毁组件
   		        if (this.editor == null) return
   		        editor.destroy() // 组件销毁时，及时销毁编辑器
   	     }
   }

ossUpload.js

import $http from '@/util/http.js'
const OSS = require("ali-oss");
const api = require('@/util/api.js')
//获取配置的方法
const getListData = async () => {
    let info = await $http.get(api.getOssConfig)
    return {
        accessKeyId:.info.accessid,
        accessKeySecret: info.accessKeySecret,
        stsToken: info.securityToken,
    }
};

//获取配置条件
const client = (data) => {
  return new OSS({
    region: "oss-cn-hangzhou",//这个根据自己项目去填写(地区)
    accessKeyId: data.accessKeyId,//
    accessKeySecret: data.accessKeySecret,
    stsToken: data.stsToken,
    bucket: "xxx", ,//这个根据自己项目去填写
  });
};
//获取uuid随机数作为文件名称
const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return `${+new Date()}_${rx()}${rx()}`;
};
//创建oss上传方法
async function ossUpload(file,module='image') {
  //调用接口，获取配置
    let configInfo = await getListData();
    let fileType = file.type.split("/")[1]
    //拼接文件名称（拼接你需要保存的目录路径,'avatar/'这是我的目录路径）
    var date = new Date();
    let fileNameUrl = `avatar/${await getFileNameUUID()}.${fileType}`;
    let res = await client(configInfo).put(fileNameUrl, file);
    return res.url;
}

export default ossUpload;