FineUI UMEditor富文本上传图片

Posted alex-mercer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FineUI UMEditor富文本上传图片相关的知识,希望对你有一定的参考价值。

UMEditor

其实还是挺简单的,只需要配置一个上传地址,以及返回地址就可以了。但是我还是搞了快2天。难受

前端页面(FineUI)

 F.htmlEditor().Label("文本编辑器").ID("HtmlEditor1").Height(200).ToolbarSet(FineUIMvc.EditorToolbarSet.Full).Editor(Editor.UMEditor).BasePath(Url.Content("~/res/third-party/umeditor"))

UMEditor 需要配置config文件

    //图片上传配置区
        , imageUrl:  window.document.location.href.substring(0, window.document.location.href.indexOf(window.document.location.pathname)) +"/api/WebApi/TempTest"     //图片上传提交地址,这边获取到根目录加上API接口。 如果写"Test"直接引用当前页面的控制器,这边建议写成API接口,方便后期调用
        , imagePath: ""          //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置。为空,在返回值那边写路径即可
        ,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数

后端

返回的Json格式如下。但是不能直接返回Json,要设置到respone响应头中返回

{
"state": "SUCCESS",
"original": "80px - u526fu67.jpg",
"size": "13252",
"title": "1465.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/20112/146075274.jpg"
}

重点在于这个方法

//API方法
  public void TempTest()
        {
            //获取上下文
            HttpContextBase context = (HttpContextBase)Request.Properties["MS_HttpContext"];
            var file = context.Request.Files[0]; //获取选中文件
           // Stream stream = file.InputStream;    //将文件转为流

            Random ran = new Random((int)DateTime.Now.Ticks);//利用时间种子解决伪随机数短时间重复问题
            //文件保存位置及命名,精确到毫秒并附带一组随机数,防止文件重名,数据库保存路径为此变量
            string serverPath = "/imgUploads/" + DateTime.Now.ToString("yyyyMMddhhmmssms") + ran.Next(99999) + ".jpg";

            //路径映射为绝对路径
            string path = context.Server.MapPath(serverPath);
            JObject json = new JObject();
            try
            {
                file.SaveAs(path);//图片保存,JPEG格式图片较小
                json.Add("state", "SUCCESS");
                json.Add("original", "asd");
                json.Add("size", "181KB");
                json.Add("url", serverPath);
                json.Add("title", "阿萨德");
                json.Add("type", ".jpg");
            }
            catch { }

            context.Response.Write(json.ToString());//输出结果
            context.Response.End();
        }

//控制器方法
 [HttpPost]
        public void Test()
        {
            var context = HttpContext;
            var file = context.Request.Files[0]; //获取选中文件
            Random ran = new Random((int)DateTime.Now.Ticks);//利用时间种子解决伪随机数短时间重复问题
            string serverPath = "/imgUploads/" + DateTime.Now.ToString("yyyyMMddhhmmssms") + ran.Next(99999) + ".jpg";

            //路径映射为绝对路径
            string path = context.Server.MapPath(serverPath);
            JObject json = new JObject();
            try
            {
                file.SaveAs(path);//图片保存,JPEG格式图片较小
                json.Add("state", "SUCCESS");
                json.Add("original", "asd");
                json.Add("size", "181KB");
                json.Add("url", serverPath);
                json.Add("title", "阿萨德");
                json.Add("type", ".jpg");
            }
            catch { }

            context.Response.Write(json.ToString());//输出结果
            context.Response.End();
        }

以上是关于FineUI UMEditor富文本上传图片的主要内容,如果未能解决你的问题,请参考以下文章

thinkphp 搭配UMeditor富文本编辑器使用

UMeditor百度富文本编辑器的使用

百度umeditor编辑器如何能实现直接粘贴把图片上传到服务器中?

修改UMeditor(百度富文本编辑器)上传视频

umeditor 上传图片 相对路径的设置和保存

让富文本编辑器支持复制doc中多张图片直接粘贴上传