ueditor编辑器上传图片（ueditor粘贴图片上传）



项目引入的是UEditor富文本编辑器，由于安全（把攻击脚本伪造成图片）和图片大小（base64格式的图片可能会太大）的原因，用户输入的图片都要先发送给后端，然后拿到后端的链接赋值给image标签的src属性。

这里有两种处理办法：
第一种：
在ueditor.config.js里面的window.UEDITOR_CONFIG（配置项主体）加上imageUrl参数，大概32行处：

let {UE} = window
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
/
* 根据action名称获取请求的路径
* @method getActionUrl
* @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径
* @param { String } action action名称
* @example
* ```javascript
* editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"
* editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"
* editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"
* editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"
* ```
*/
UE.Editor.prototype.getActionUrl = function _getActionUrl(action) {
if (action === 'uploadimage') {
return 'xxx' // 图片接口地址
}
// ...
return this._bkGetActionUrl(action)
}

这时候使用工具栏的上传图片功能就处理完了，但是粘贴的图片有时候不会触发上述方法，不知道大家有没有这种情况，真是纳闷，检查发现是有时候粘贴的图片是在clipboardData的第二位？？？，emmm，只能去修改getPasteImage方法了，大概在26589行。

function getPasteImage(e) {
var item = e.clipboardData && e.clipboardData.items
if (item) {
var reg = /^image//
if (item.length === 1 && reg.test(item[0].type)) {
return item
} else if (item.length === 2 && reg.test(item[1].type)) {
// 有时候粘贴的图片会在第二位
return {
0: item[1],
length: 1
}
} else {
return null
}
} else {
return null
}
}

参考文章：http://blog.ncmem.com/wordpress/2023/12/27/ueditor%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%9b%be%e7%89%87%e7%b2%98%e8%b4%b4%e5%92%8c%e4%b8%8a%e4%bc%a0%e9%97%ae%e9%a2%98/

欢迎入群一起讨论

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/63545.html