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

本文主要是介绍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}