vue之Ueditor自定义单图上传返回格式
Posted 智商不够_熬夜来凑
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之Ueditor自定义单图上传返回格式相关的知识,希望对你有一定的参考价值。
项目使用Ueditor单图上传,不想因为一个上传就去更改数据返回的格式,也不想用后端的源码,那自己改一下好了!
我后台返回格式如下:status:0,msg:'',data:
查看了半天源代码,眼睛都看花了。。。,主要更改在ueditor.all.js的24504行('simpleupload')单图上传功能
/ plugins/simpleupload.js
/**
* @description
* 简单上传:点击按钮,直接选择文件上传。
* 原 UEditor 作者使用了 form 表单 + iframe 的方式上传
* 但由于同源策略的限制,父页面无法访问跨域的 iframe 内容
* 导致无法获取接口返回的数据,使得单图上传无法在跨域的情况下使用
* 这里改为普通的XHR上传,兼容到IE10+
* @author HaoChuan9421 <hc199421@gmail.com>
* @date 2018-12-20
*/
UE.plugin.register('simpleupload', function()
var me = this,
containerBtn,
timestrap = (+new Date()).toString(36);
function initUploadBtn()
var w = containerBtn.offsetWidth || 20,
h = containerBtn.offsetHeight || 20,
btnStyle = 'display:block;width:' + w + 'px;height:' + h + 'px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;';
var form = document.createElement('form');
var input = document.createElement('input');
form.id = 'edui_form_' + timestrap;
form.enctype = 'multipart/form-data';
form.style = btnStyle;
input.id = 'edui_input_' + timestrap;
input.type = 'file'
input.accept = 'image/*';
input.name = me.options.imageFieldName?me.options.imageFieldName:"file";//后端接收的,php 如;$_FILES['file']
input.style = btnStyle;
form.appendChild(input);
containerBtn.appendChild(form);
input.addEventListener('change', function(event)
if (!input.value) return;
var loadingId = 'loading_' + (+new Date()).toString(36);
//注释掉 var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
var action = me.options.baseUrl //自定义上传路径,参数等 utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
var allowFiles = me.getOpt('imageAllowFiles');
me.focus();
me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme + '/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
//console.log(action)
function showErrorLoader(title)
if (loadingId)
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage',
'id': loadingId,
'content': title,
'type': 'error',
'timeout': 4000
);
//后端验证给他去掉了。。。
/* 判断后端配置是否没有加载成功 */
// if (!me.getOpt('imageActionName'))
// showErrorLoader(me.getLang('autoupload.errorLoadConfig'));
// return;
//
//console.log('---后端加载')
// 判断文件格式是否错误
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf('.')) : '';
if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1))
showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
return;
//console.log(filename)
var xhr = new XMLHttpRequest()
xhr.open('post', action, true)
if (me.options.headers && Object.prototype.toString.apply(me.options.headers) === "[object Object]")
for (var key in me.options.headers)
xhr.setRequestHeader(key, me.options.headers[key])
//console.log(me.options.headers)
xhr.onload = function()
//console.log(xhr.responseText)
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)
var res = JSON.parse(xhr.responseText)
var link = me.options.baseUrl + res.data;
//返回的data是这个格式的 status:0,msg:'',data:''
if (res.status == 0 && res.data!="")
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', res.title || '');
loader.setAttribute('alt', res.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
me.fireEvent("contentchange");
else
showErrorLoader(res.msg);
else
showErrorLoader(me.getLang('simpleupload.loadError'));
;
xhr.onerror = function()
showErrorLoader(me.getLang('simpleupload.loadError'));
;
xhr.send(new FormData(form));
form.reset();
)
vue引入配置:
user:JSON.parse(sessionStorage.getItem('user')),
msg: '<font color=gray>输入文字</font>',
myConfig:
// 编辑器不自动被内容撑高
serverparam:
method:"ueditorUpload"
,
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: '',//
baseUrl:"",//图片路径
imageActionName:"",
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: '/UEditor/'
图片粘贴
代码位于ueditor.all.js 23752行
其他如果需要更改也可以按照这个思路,还是建议编辑器搞简单一点,方便二次开发使用
以上是关于vue之Ueditor自定义单图上传返回格式的主要内容,如果未能解决你的问题,请参考以下文章
百度富文本编辑器vue-ueditor-wrap单图上传,直传到阿里云OSS,纯前端处理