ueditor使用(一)：跨域上传文件+单图上传回显

程序员文章站 2024-01-20 08:48:34

...

事先准备两个文件夹，用于发布到本地服务器测试，端口号我分别使用了 8011 和 8022，下面也用8011、8022代表这两个文件夹

官网下载解压后目录如下

ueditor使用(一)：跨域上传文件+单图上传回显

我们将解压的目录发布到本地服务器（http://192.168.2.57:8011）也就是复制粘贴到 8011 文件夹
根目录新建文件夹 view 用于存放新建的页面

新建页面 test.html,引入代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <!-- 加载编辑器的容器 -->
        <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
        <!-- 配置文件 -->
        <script src="../ueditor.config.js" type="text/javascript" charset="utf-8"></script>
        <!--
            编辑器源码文件
            官方教程中的  解压后并未找到 ueditor.all.js 
            可以引用 _examples 中的 editor_api.js 代替
        -->
        <script src="../_examples/editor_api.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 页面初始化编辑器,参数配置见 ueditor.config.js 自带注释
            var ue = UE.getEditor('container', {
                initialFrameHeight: 380, //初始化编辑器高度
                toolbars: [
                    [
                        'source', //源代码
                        'simpleupload', //单图上传
                        'insertimage', //多图上传
                        'insertvideo', //视频
                    ]
                ]
            });
        </script>
    </body>
</html>

浏览器运行如下图，初始化成功，但会提示 后台配置项返回格式出错，上传功能将不能正常使用！

ueditor使用(一)：跨域上传文件+单图上传回显

这里我们打开8011根目录 ueditor.config.js ，找到 serverUrl 我们以 asp 为例

serverUrl: URL + "asp/controller.asp" 即可正常使用，点击单图上传，上传成功，单浏览器出现404，并未显示图片
ueditor使用(一)：跨域上传文件+单图上传回显
点击单图上传发现图片上传成功，但是客户端回执了一个错误的路径

我们只需要到8011目录下找到 config.json

ueditor使用(一)：跨域上传文件+单图上传回显

由回执路径可知 url= http://192.168.2.57:8011 + imageUrlPrefix + imagePathFormat，所以

根据我的路径得出我需要改成 "imageUrlPrefix":"/asp/" 就行, 测试成功

如果你的项目对文件目录没有什么要求，那么上面的设置已经够用了

下面就说说跨域上传的方法，选择一项你想用的服务器文件

我发布了net版本（http//:192.168.2.57:8022）也就是将 net文件夹中的文件复制粘贴到 8022 ，并发布了IIS

找到8022 的服务配置 config.json ，将图片访问前缀改成你发布的路径

ueditor使用(一)：跨域上传文件+单图上传回显

找到8011 的 ueditor.config.js,将服务器统一接口路径改成你发布的服务路径，如下图

ueditor使用(一)：跨域上传文件+单图上传回显

注意js缓存可能导致 serverUrl出错，

net 处理文件上传失败（跨域问题）https://blog.csdn.net/m0_37894611/article/details/104967370

到这里，文件上传成功，但是回显失败（官方文档有说明：单文件上传是form提交到iframe，然后检测iframe里面的内容来返回结果，官方已经明确说明了单文件上传不能实现跨域上传，就是因为跨域的iframe是获取不到iframe里面的html代码的，所以现在不能获得上传地址）。

关于单图上传回显的解决方法：转至 https://www.cnblogs.com/hpnet/p/6290452.html 再此记录一下

好了，实现单文件跨域上传。首先要搞懂它的原理，它是提交到iframe去上传，然后监控iframe加载完成后js获取iframe里面的内容也就是json结果来得到图片上传结果。而跨域上传iframe里面的页面和当前页面不是同一个域名就获取不到json了，官方说暂时不支持，其实so easy，用传统的代理页面来解决，就是文件服务器上传成功后，不直接显示结果，而是跳转到 8011 下面来的result.ashx页面来，把结果传递到这个页面上，再输出来，这样iframe就在同一个域名上了，js就能直接获取iframe里面的内容了。

首先在 8011下面添加result.ashx：

<%@ WebHandler Language="C#" Class="UEditorHandler" %>

using System;
using System.Web;
using System.IO;
using System.Collections;

public class UEditorHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var result=context.Request["result"];
        //当然这里最好判断一下result是否安全，不要接收到内容就显示这样会被人利用。
        if(result!=null)
            context.Response.Write(result.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

因为只有单图上传（也就是简单文件上传）要用iframe方式，所以我们要判断一下，只有简单文件上传才用这种方式。打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个，搜索<input id="edui_input_ 在</form>之前加上：
<input type="hidden" name="issimpleupload" value="true" /> 这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。

如果没有ueditor.all.js文件的，请到 _src/plugins/simpleupload.js 搜索添加

ueditor使用(一)：跨域上传文件+单图上传回显

然后改 8022 的处理文件：app_code里面的Handler.cs打开，第28行的大括号里面加上判断：

if (String.IsNullOrWhiteSpace(jsonpCallback))
        {
            var issimple = Request["IsSimpleUpload"];
            if (issimple != null && issimple.ToString()=="true")
            {
                Response.Redirect("http://192.168.2.57：8011/result.ashx?result=" + json); //把json传递到8011下面去呈现结果。
            }
            Response.AddHeader("Content-Type", "text/plain");
            Response.Write(json);
        }

到此跨域上传图片功能完美实现