AVUE 富文本编辑器 avue-plugin-ueditor 图片上传

avue-plugin-ueditor 版本：0.2.3。

首先进行评价，1、上手比较简单；2、作者精力有限（太懒）。

ueditor使用的是wangEditor富文本编辑器，因此相关配置可参考：wangEditor - 轻量级 web 富文本编辑器https://www.wangeditor.com/

一、修改源码

看avue官网手册，还是非常简单，但是依然给出了customConfig配置项。但其实该配置项如不修改源码，基本不起作用。

例如：我想修改后台接收文件的参数，我想增加额外的参数，哎~不行，改源码吧。

// 增加富文本插件
package.json
"dependencies": {
    "avue-plugin-ueditor": "^0.2.3",
}
// 终端执行
yarn install

进入node_modules/avue-plugin-ueditor目录，找到ueditor/src/main.vue

 然后找到uploadFile方法：

可以很清楚地看到：参数是上传时临时创建的变量，且没有处理customConfig中的配置参数。

let param = new FormData()；
param.append('file', file)；// 写死了后台接收文件参数为file

这个方法需要手动进行修改：

1、使用_self替代this。
uploadFile(file) {
      const _self = this;

      return new Promise...

2、修改param，集成相关参数
let param = new FormData()
// 见wangEditor，复制上传图片的参数设置
if(_self.editor.config.uploadImgParams){
  for (let key in _self.editor.config.uploadImgParams) {
      param.append(key, _self.editor.config.uploadImgParams[key]);
  }
}
let url = _self.action
// 指定后台接收文件参数，默认为file
let fileName = _self.editor.config.uploadFileName;
param.append(fileName ? fileName : 'file', file)

PIS:作者在initEdit方法中已经拷贝了customConfig的参数，但是uploadFile方法没有进行参数处理。 

二、CRUD参数配置

{
      "type": "ueditor",
      "component": 'avue-ueditor',
      "label": "回复内容",
      "span": 24,
      "prop": "body",
      "options": {
        "action": "/portal/common/local/attach/upload",
        "customConfig": {
          //wangEditor编辑的配置          
          "uploadFileName": "attach", // 指定后台接收文件参数
          "uploadImgParams": {        // 增加额外参数
            "folder": "replay"
          }
        }，
        "props": {
          "res": "data",       // 解析文件上传后的respose.JSON
          "url": "fileUrl"     // 解析responseJSON==> data.fileUrl
        }
      },
      "overHidden": true
    }

三、效果演示

  完美！但是作为轻微强迫症患者，强烈要求作者大大更新avue-plugin-ueditor插件。