本文共 2074 字，大约阅读时间需要 6 分钟。

Finder(UE Richness Editor)配置及图片上传处理

——基于MVC框架的实现笔记

本文将详述基于UE Richness Editor实现的图片上传功能的配置与处理逻辑，结合MVC技术实现图片上传功能。

接下来将介绍实现过程中涉及到的技术细节与配置操作。

配置UE Richness Editor

首先，在前端页面引入UE编辑器，常规配置方式如下：

var ue = UE.getEditor('editor', {      serverUrl: '/Tool/eventHandler',  // 配置图片上传的后台接口      // 其他配置参数，可根据需求添加  })

配置说明：

serverUrl指向处理图片上传的后台接口，即前端调用上传功能时的请求地址。Uri%=e85fdc4b5f83ef489af5cfb%

后台逻辑处理

后台接口采用MVC框架开发，对应的控制器逻辑大致为：

public class ToolController : Controller  {      public void eventHandler()      {          Response.ContentType = "text/plain";          string action = Request["action"];          string json = "";          if (action == "config")          {              json = @"{                  ""imageActionName"": ""UploadImage"，                  ""imageFieldName"": ""upfile"，                  ""imageCompressEnable"": ""true"，                  ""imageInsertAlign"": ""none"，                  ""imageUrlPrefix"": ""，                  ""imageAllowFiles"": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]              }";          }          else          {              if (Request.Files.Count > 0)              {                  string fileName = Request.Files[0].FileName;                  string extension = fileName.Substring(fileName.LastIndexOf('.'));                  string newFileName = Guid.NewGuid().ToString().Replace("-", "") + fileName;                  Request.Files[0].SaveAs(Server.MapPath("~img/" + newFileName));                  json = new JavaScriptSerializer().Serialize(new { url = "/" + "img/" + newFileName, state = "SUCCESS" });              }          }          Response.Write(json);          Response.End();      }  }

使用说明：

通过action参数判断调用类型

action "config"时返回配置参数

action "upload"时处理文件上传

下载成功后返回JSON包含图片路径

操作流程说明

系统入口处初始时总是以action = "config"的方式进入后台接口点击图片上传按钮时，请求同一接口即可触发文件上传处理处理成功后，不会跳转页面，仅通过Response.End()告知前端完成

系统自带显示界面对应各环节输出结果，可清晰监查看处理过程，确保上传流程顺畅运行

通过构造.homomain_invalid_zhuhong_total_d eqi,a_a_ZZMzWW[QP.1024x768]_ZZMGDZMMG[RockyRoad]_00000000_0000_000000_00000000_1.jpg[Alpine-White] /* 照片描述自动生成 */

本次实现利用了UE编辑器的灵活配置能力，结合MVC的便捷性，完成了目标功能的开发与调试。