vue之Ueditor自定义单图上传返回格式

2023-09-06 17:54| 来源: 网络整理| 查看: 265

项目使用Ueditor单图上传，不想因为一个上传就去更改数据返回的格式，也不想用后端的源码，那自己改一下好了！

我后台返回格式如下：{status:0,msg:'',data:{}}

查看了半天源代码，眼睛都看花了。。。，主要更改在ueditor.all.js的24504行（'simpleupload'）单图上传功能

/ plugins/simpleupload.js /** * @description * 简单上传:点击按钮,直接选择文件上传。 * 原 UEditor 作者使用了 form 表单 + iframe 的方式上传 * 但由于同源策略的限制，父页面无法访问跨域的 iframe 内容 * 导致无法获取接口返回的数据，使得单图上传无法在跨域的情况下使用 * 这里改为普通的XHR上传，兼容到IE10+ * @author HaoChuan9421 * @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', ''); //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: '输入文字', 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行

其他如果需要更改也可以按照这个思路，还是建议编辑器搞简单一点，方便二次开发使用

【本文地址】

公司简介

联系我们