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

本文介绍如何针对UEditor的单图上传功能进行自定义调整,以适配特定的后端数据返回格式,同时保持代码简洁易于二次开发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目使用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-wrap` 上传功能 为了在 `vue-ueditor-wrap` 中实现上传功能,可以按照以下方法进行配置: #### 配置项说明 `vue-ueditor-wrap` 提供了一个名为 `config` 的属性用于自定义编辑器的行为。通过设置该属性中的 `serverUrl` 和其他参数,可以指定上传的目标服务器以及相关选项。 以下是具体实现方式: --- #### 安装与基础配置 首先确保已正确安装 `vue-ueditor-wrap` 并完成基本初始化[^3]。 如果尚未安装,请执行以下命令: ```bash npm install vue-ueditor-wrap --save ``` 接着,在项目中引入组件并注册它: ```javascript import VueUeditorWrap from 'vue-ueditor-wrap'; // 引入 ueditor 组件 export default { components: { VueUeditorWrap }, }; ``` --- #### 配置上传功能 要启用上传功能,需调整 `config` 属性的相关字段。以下是一个完整的配置示例: ```html <template> <div> <VueUeditorWrap v-model="content" :config="ueConfig"></VueUeditorWrap> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap'; export default { components: { VueUeditorWrap }, data() { return { content: '', // 编辑器内容 ueConfig: { // UEditor 初始化配置 serverUrl: '/upload', // 后端接收上传请求的接口地址 toolbars: [ ['bold', 'italic', 'underline', 'fontborder', 'strikethrough'], ['insertimage'], // 添加片按钮 ], initialFrameWidth: null, // 初始宽度 initialFrameHeight: 350, // 初始高度 imageUploadLimitSize: 2 * 1024 * 1024, // 设置片大小限制 (位字节) imageUrlPrefix: '', // 如果需要给片路径加前缀,则在此处填写 imageAllowFiles: ['.jpg', '.jpeg', '.png', '.gif'], // 允许上传的文件类型 }, }; }, }; </script> ``` 上述代码中设置了以下几个重要参数: - **`serverUrl`**: 指定后端处理上传请求的 URL 地址[^4]。 - **`toolbars`**: 自定义工具栏显示的功能按钮,这里包含了 `insertimage` 插件以支持片插入操作。 - **`imageUrlPrefix`**: 可选配置,当返回片路径不完整时可补充域名或其他前缀。 - **`imageAllowFiles`**: 控制允许上传的文件扩展名列表。 --- #### 处理后端逻辑 前端配置完成后,还需要搭建一个后端服务来接收和保存上传片。假设使用 Node.js + Express 构建简的 API 接口作为例子: ```javascript const express = require('express'); const multer = require('multer'); // 文件上传中间件 const path = require('path'); // 创建应用实例 const app = express(); // 配置存储位置 const storage = multer.diskStorage({ destination(req, file, cb) { cb(null, './uploads/'); }, filename(req, file, cb) { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9); cb(null, `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`); }, }); // 使用 multer 中间件解析 multipart/form-data 请求体 const upload = multer({ storage }); app.post('/upload', upload.single('upfile'), (req, res) => { if (!req.file) { return res.status(400).json({ state: 'ERROR', msg: '未接收到文件' }); } const filePath = req.file.path.replace(/\\/g, '/'); res.json({ state: 'SUCCESS', url: `/static/${filePath}`, // 返回片访问路径 title: req.file.filename, original: req.file.originalname, }); }); // 启动服务 app.listen(3000, () => console.log('Server running on http://localhost:3000')); ``` 此脚本实现了以下功能: - 将上传片存放在本地磁盘上的 `./uploads/` 目录; - 响应 JSON 数据结构符合 `UEditor` 对上传回调的要求。 > 注意:实际开发环境中建议对文件大小、格式等内容做更严格的校验,并考虑安全性问题(如 XSS 攻击防护)。 --- #### 测试效果 运行前后端程序后打开页面尝试插入一张片,确认其能够成功上传至服务器并将链接嵌入到富文本框内。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智商不够_熬夜来凑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值