ueditor配置项中有一项 serverUrl, 是服务器统一请求接口，所有涉及到上传以及服务端配置都从该接口请求，后面以参数action来区分具体的操作：

config
获取配置，默认
uploadimage
上传图片，在服务端配置中可配置
uploadvideo
上传视频，在服务端配置中可配置
uploadfile
上传附件，在服务端配置中可配置

服务端处理

服务端配置如下

{
    /* 上传图片配置项 */
    imageActionName: 'uploadimage', /* 执行上传图片的action名称 */
    imageFieldName: 'upfile', /* 提交的图片表单名称 */
    imageMaxSize: 2048000, /* 上传大小限制，单位B */
    imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */
    imageCompressEnable: true, /* 是否压缩图片,默认是true */
    imageCompressBorder: 1600, /* 图片压缩最长边限制 */
    imageInsertAlign: 'none', /* 插入的图片浮动方式 */
    imageUrlPrefix: prefix, /* 图片访问路径前缀 */
    imagePathFormat: '/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
    /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
    /* {time} 会替换成时间戳 */
    /* {yyyy} 会替换成四位年份 */
    /* {yy} 会替换成两位年份 */
    /* {mm} 会替换成两位月份 */
    /* {dd} 会替换成两位日期 */
    /* {hh} 会替换成两位小时 */
    /* {ii} 会替换成两位分钟 */
    /* {ss} 会替换成两位秒 */
    /* 非法字符 \ : * ? " < > | */
    /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

    /* 涂鸦图片上传配置项 */
    scrawlActionName: 'uploadscrawl', /* 执行上传涂鸦的action名称 */
    scrawlFieldName: 'upfile', /* 提交的图片表单名称 */
    scrawlPathFormat: '/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    scrawlMaxSize: 2048000, /* 上传大小限制，单位B */
    scrawlUrlPrefix: '', /* 图片访问路径前缀 */
    scrawlInsertAlign: 'none',

    /* 截图工具上传 */
    snapscreenActionName: 'uploadimage', /* 执行上传截图的action名称 */
    snapscreenPathFormat: '/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    snapscreenUrlPrefix: '', /* 图片访问路径前缀 */
    snapscreenInsertAlign: 'none', /* 插入的图片浮动方式 */

    /* 抓取远程图片配置 */
    catcherLocalDomain: ['127.0.0.1', 'localhost', 'img.baidu.com'],
    catcherActionName: 'catchimage', /* 执行抓取远程图片的action名称 */
    catcherFieldName: 'source', /* 提交的图片列表表单名称 */
    catcherPathFormat: '/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    catcherUrlPrefix: '', /* 图片访问路径前缀 */
    catcherMaxSize: 2048000, /* 上传大小限制，单位B */
    catcherAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 抓取图片格式显示 */

    /* 上传视频配置 */
    videoActionName: 'uploadvideo', /* 执行上传视频的action名称 */
    videoFieldName: 'upfile', /* 提交的视频表单名称 */
    videoPathFormat: '/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    videoUrlPrefix: prefix, /* 视频访问路径前缀 */
    videoMaxSize: 102400000, /* 上传大小限制，单位B，默认100MB */
    videoAllowFiles: [
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid'], /* 上传视频格式显示 */

    /* 上传文件配置 */
    fileActionName: 'uploadfile', /* controller里,执行上传视频的action名称 */
    fileFieldName: 'upfile', /* 提交的文件表单名称 */
    filePathFormat: '/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
    fileUrlPrefix: prefix, /* 文件访问路径前缀 */
    fileMaxSize: 51200000, /* 上传大小限制，单位B，默认50MB */
    fileAllowFiles: [
        '.png', '.jpg', '.jpeg', '.gif', '.bmp',
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid',
        '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.cab', '.iso',
        '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.xml'
    ], /* 上传文件格式显示 */

    /* 列出指定目录下的图片 */
    imageManagerActionName: 'listimage', /* 执行图片管理的action名称 */
    imageManagerListPath: '/ueditor/php/upload/image/', /* 指定要列出图片的目录 */
    imageManagerListSize: 20, /* 每次列出文件数量 */
    imageManagerUrlPrefix: '', /* 图片访问路径前缀 */
    imageManagerInsertAlign: 'none', /* 插入的图片浮动方式 */
    imageManagerAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 列出的文件类型 */

    /* 列出指定目录下的文件 */
    fileManagerActionName: 'listfile', /* 执行文件管理的action名称 */
    fileManagerListPath: '/ueditor/php/upload/file/', /* 指定要列出文件的目录 */
    fileManagerUrlPrefix: '', /* 文件访问路径前缀 */
    fileManagerListSize: 20, /* 每次列出文件数量 */
    fileManagerAllowFiles: [
        '.png', '.jpg', '.jpeg', '.gif', '.bmp',
        '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
        '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid',
        '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.cab', '.iso',
        '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.xml'
    ] /* 列出的文件类型 */

}

如果通过后端提供接口的方式来处理，前端只需要配置一个serverUrl即可，其他都交由后端处理

前端处理

在前端通过接口能直接上传文件时，可以由前端自行处理。
具体的实现如下：

`服务端配置`文件`config.js`

将`config.js`放到前端

config.js具体文件同上面的服务端配置, 其中需要更改的配置：

// 此处只举例图片、文件、视频的前缀配置
// 后面上传的时候使用的是相对路径，如果是绝对路径，配置为空字符串即可
{
    //...
    imageUrlPrefix: prefix, /* 图片访问路径前缀 */
    //...
    videoUrlPrefix: prefix, /* 视频访问路径前缀 */
    //...
    fileUrlPrefix: prefix, /* 文件访问路径前缀 */
    //...
}

覆写`UE.Editor.prototype.loadServerConfig`

在初始化UEditor之前，覆写loadServerConfig方法，将默认的服务器加载配置文件，改为本地导入配置文件。

// 引入本地的配置文件
import config from './config.js'
UE.Editor.prototype.loadServerConfig = function load() {
  this.options = {
    ...this.options,
    ...config
  }
  this.fireEvent('serverConfigLoaded')
  this._serverConfigLoaded = true
}

添加自定义上传处理

ueditor中默认的上传处理：

单图片上传
使用构建form表单的方式提交
多图片、视频、附件上传
使用ajax提交

需要分别处理上面两种情况。
实现方式：

在ueditor.options中增加自定义上传函数uploadFileCustom
在所有上传的地方，首先判断ueditor.options中是否存在函数uploadFileCustom，如果存在，就通过自定义的上传，否则走默认处理。

在`ueditor.options`中增加自定义上传函数`uploadFileCustom`

在上面的自定义config.js的loadServerConfig方法中添加

// 引入本地的配置文件
   import config from './config.js'
   UE.Editor.prototype.loadServerConfig = function load() {
     this.options = {
       ...this.options,
       ...config,
       //++++++++++++ start
       /**
        * @param file 文件对象
        * @param cb 回调函数，具体回传的参数如下
        */
       uploadFileCustom: (file: File, cb: (param: object) => void) => {
         //从Ueditor传出来的file, 使用 file instanceof File 为false，所以需要再用File对象做一次转换
         file = new File([file], file.name, { type: file.type })
         cb({
             url: ret.name,  //链接
             title: file.name, //文件名
             original: file.name,  //文件名
             type: file.name.substring(file.name.lastIndexOf('.'), file.name.length),  //文件类型
             state: 'SUCCESS'  //固定为'SUCCESS'
         })
     }
     //+++++++++++++ end
     this.fireEvent('serverConfigLoaded')
     this._serverConfigLoaded = true
   }

处理上传的地方

单图片上传

ueditor.all.js文件中找到函数：

/**
 * @description
 * 简单上传:点击按钮,直接选择文件上传
 * @author Jinqn
 * @date 2014-03-31
 */
UE.plugin.register('simpleupload', function (){
  //...
  // 此处表单提交
  form.submit();
  //...


  //上面部分更改后的代码如下
  //...
  // 如果存在自定义的上传方法`uploadFileCustom`
  if(typeof me.options.uploadFileCustom === 'function'){
    me.options.uploadFileCustom(event.target.files[0],function(json){
        var link = me.options.imageUrlPrefix + json.url;
        var loader = me.document.getElementById(loadingId);
        loader.setAttribute('src', link);
        loader.setAttribute('_src', link);
        loader.setAttribute('title', json.title || '');
        loader.setAttribute('alt', json.original || '');
        loader.removeAttribute('id');
        domUtils.removeClasses(loader, 'loadingclass');
        form.reset();
        domUtils.un(iframe, 'load', callback);
        me.fireEvent('contentchange');
      })
  } else {
      form.submit();
  }
  //...
}

多图片、视频、附件上传

更改`UEditor/third-party/webuploader/webuploader.js`文件

在filepicker中返回的File对象(该File对象不是原生的，而是封装过后的，如果需要通过 instanceof File 或者 instanceof Blob来判断，则要将原来的文件类型保留，此处使用original对象来保存)

case 'change':
  files = me.exec('getFiles');
  me.trigger('select', $.map(files, function (file) {
    //+++ start
    var original = file;
    //+++ end
    file = new File(me.getRuid(), file);

    // 记录来源。
    file._refer = opts.container
    //+++ start
    file.original = original
    //+++ end
    return file
  }), opts.container)
break

添加自定义上传
找到如下代码处：

return Html5Runtime.register( 'Transport', {
            init: function() {
                this._status = 0;
                this._response = null;
            },
    
            send: function() {
              //+++++++ start
              // 如果有自定义上传，则调用自定义上传。以回调的方式返回上传后的参数。
              if(typeof opts.uploadFileCustom === 'function') {
                    var me = this;
                    opts.uploadFileCustom(blob.original, function(ret){
                        me._response = JSON.stringify(ret);
                        return me.trigger('load');
                    })
                    return
              }
              //+++++++ end
            }

更改具体插件的上传配置

UEditor/dialogs/image/image.js
UEditor/dialogs/video/video.js

UEditor/dialogs/attachment/attachment.js
更改上传配置：

uploader = _this.uploader = WebUploader.create({
  pick: {
      id: '#filePickerReady',
      label: lang.uploadSelectFile
  },
  swf: '../../third-party/webuploader/Uploader.swf',
  server: actionUrl,
  //+++ start
  uploadFileCustom: editor.options.uploadFileCustom, 
  ///+++ end
  fileVal: editor.getOpt('fileFieldName'),
  duplicate: true,
  fileSingleSizeLimit: fileMaxSize,
  compress: false
});

本文地址： http://gehaiqing.com/2019/06/13/ueditor-custom-upload/

@葛海清的个人空间

ueditor自定义上传-前后端分离

2019-06-13 15:37:49
tech

服务端处理

前端处理

`服务端配置`文件`config.js`

将`config.js`放到前端

覆写`UE.Editor.prototype.loadServerConfig`

添加自定义上传处理

在`ueditor.options`中增加自定义上传函数`uploadFileCustom`

处理上传的地方

单图片上传

多图片、视频、附件上传

更改`UEditor/third-party/webuploader/webuploader.js`文件

更改具体插件的上传配置

服务端处理

前端处理

服务端配置文件config.js

将config.js放到前端

覆写UE.Editor.prototype.loadServerConfig

添加自定义上传处理

在ueditor.options中增加自定义上传函数uploadFileCustom

处理上传的地方

单图片上传

多图片、视频、附件上传

更改UEditor/third-party/webuploader/webuploader.js文件

更改具体插件的上传配置

`服务端配置`文件`config.js`

将`config.js`放到前端

覆写`UE.Editor.prototype.loadServerConfig`

在`ueditor.options`中增加自定义上传函数`uploadFileCustom`

更改`UEditor/third-party/webuploader/webuploader.js`文件