vue中实现ueditor上传图片遇到的几个问题及解决方案

vue中实现ueditor上传图片功能

遇到的问题

1. 初始化ue组件无法正常显示，无法加载

2. 单图上传的图标变灰无法点击 or 多图上传显示后端配置项没有正常加载，上传插件不能正常使用！

3. 配置上传接口错误，请求报404，无法找到

4. 上传后，服务端显示上传成功，并返回正确的json结果，但在ueditor中无法回显图片并报上传错误

解决方案

1. 在ueditor.config.js中配置:

   在var URL = window.UEDITOR_HOME_URL || getUEBasePath();之前加上相对于本项目UE（官网下载的文件夹）的位置，如本项目是window.UEDITOR_HOME_URL = '/static/UE/'

   |-- B2B-PC-VUE2
   |   |-- static
   |      |-- UE

   window.UEDITOR_HOME_URL = '/static/UE/';
   var URL = window.UEDITOR_HOME_URL || getUEBasePath();

2. config.json应动态加载，由服务端返回(根据服务端上传图片成功返回图片url是否完整选择是否修改config.json中图片访问前缀)

3. 由于本项目旨在前后端分离，全部采用接口模式访问，故在ueditor.config.js配置接口路径serverUrl时，不应根据项目位置去找controller,而是访问的接口全路径，如下：
   （http://localhost:3000为我本地开启的node提供的接口服务，按实际修改）

   /**
   * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
   */
   window.UEDITOR_CONFIG = {
   
     //为编辑器实例添加一个路径，这个不能被注释
     UEDITOR_HOME_URL: URL
   
     // 服务器统一请求接口路径
     , serverUrl: "http://localhost:3000/ue/upload"

4. 此番断点到ueditor.all.js文件中callback回调方法中iframe值返回正确，但一直取不到body值，上传返回的json值便放在body中，帮而一直回显不了，其实图片已经上传成功了。这是跨域导致的问题，需要使用代理，故在ueditor.config.js配置接口路径serverUrl时应为代理模式，改为以下接口路径：
   （注：其中/api是vue项目中使用webpack做的proxy代理）

   /**
   * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
   */
   window.UEDITOR_CONFIG = {
   
     //为编辑器实例添加一个路径，这个不能被注释
     UEDITOR_HOME_URL: URL
   
     // 服务器统一请求接口路径
     , serverUrl: "/api/ue/upload"