UEditor单个图片上传遇到的问题记录

 

 查看了ueditor.all.js得源代码发现单图片上传是在选择文件输入框change事件执行表单Submit,但是出现一个问题请求头没有加入Cookie,导致后端身份认证失败,上传最终失败。

ueditor.all.js  24603行原代码:

          domUtils.on(iframe, 'load', callback);
                form.action = utils.formatUrl(imageActionUrl   (imageActionUrl.indexOf('?') == -1 ? '?':'&')   params);
                form.submit();

 

后改为了jquery提交form表单,解决了问题,

  /*修改UEDITOR源码,form提交文件改为ajax上传*/
                function ajaxUploadFile(url, form) {
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url: url,
                        data: new FormData(form),// 你的formid
                        processData: false,
                        contentType: false,
                        error: function (request) {
                            
                        },
                        success: function (json) {
                            var link, json, loader,
                                body = (iframe.contentDocument || iframe.contentWindow.document).body,
                                result = body.innerText || body.textContent || '';
                            link = me.options.imageUrlPrefix   json.url;
                            if (json.state == 'SUCCESS' && json.url) {
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', link);
                                loader.setAttribute('_src', link);
                                loader.setAttribute('title', json.title || '');
                                loader.setAttribute('alt', json.original || '');
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            } else {
                                showErrorLoader && showErrorLoader(json.state);
                            }
                            form.reset();
                        }
                    });
                }
                var action = utils.formatUrl(imageActionUrl   (imageActionUrl.indexOf('?') == -1 ? '?' : '&')   params);
                ajaxUploadFile(action, form);

                //domUtils.on(iframe, 'load', callback);
                //form.action = utils.formatUrl(imageActionUrl   (imageActionUrl.indexOf('?') == -1 ? '?':'&')   params);
                //form.submit();

不知何故 原form submit 请求头未携带cookie,求解


更多专业前端知识,请上 【猿2048】www.mk2048.com
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UEditor是一款基于JavaScript的富文本编辑器,它提供了丰富的功能和配置选项,其中包括图片上传功能。下面是ueditor配置图片上传的步骤: 1. 首先,你需要下载并引入UEditor的资源文件。可以从UEditor官网(http://ueditor.baidu.com/website/download.html)下载最新版本的资源文件。 2. 在HTML页面中引入UEditor的资源文件。例如: ```html <script type="text/javascript" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" src="ueditor/ueditor.all.js"></script> ``` 3. 创建一个textarea元素作为编辑器的容器,并指定一个唯一的id。例如: ```html <textarea id="editor" name="content"></textarea> ``` 4. 在JavaScript代码中初始化UEditor,并配置图片上传功能。例如: ```javascript var ue = UE.getEditor('editor', { // 配置图片上传相关参数 serverUrl: '/upload', // 图片上传的服务器接口地址 imageFieldName: 'file', // 上传图片的表单字段名 imageMaxSize: 5 * 1024 * 1024, // 上传图片的最大大小,默认为5MB imageAllowFiles: ['.jpg', '.jpeg', '.png', '.gif'], // 允许上传图片类型 imageCompressEnable: true, // 是否压缩图片,默认为true imageCompressBorder: 1600, // 图片压缩的最长边限制,默认为1600px imageInsertAlign: 'none', // 插入图片时的对齐方式,默认为'none' imageUploadUrl: '/upload', // 图片上传的服务器接口地址,与serverUrl相同 imageUploadParams: { // 图片上传的额外参数 token: 'your_token' } }); ``` 以上就是ueditor配置图片上传的基本步骤。你可以根据自己的需求进行更详细的配置,例如设置图片上传的路径、图片上传成功后的回调函数等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值