[Asp.net core 2.0]Ueditor 圖片上傳

摘要

在項目中要用到富文本編輯器，包含上傳圖片，插入視頻等功能。但ueditor只有.net版本，沒有支持core。那么上傳等接口就需要自己實現了。

一個例子

首先去百度ueditor官網下載簡化版的ueditor。並引入到項目中

如圖：

頁面引用以下幾個文件：

<link href="~/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script src="~/ueditor/third-party/jquery.min.js"></script>
<script src="~/ueditor/umeditor.config.js" charset="utf-8"></script>
<script src="~/ueditor/umeditor.js" charset="utf-8"></script>
<script src="~/ueditor/lang/zh-cn/zh-cn.js"></script>

修改ueditor配置文件：

  //為編輯器實例添加一個路徑，這個不能被注釋
        UMEDITOR_HOME_URL: URL

        //圖片上傳配置區
        , imageUrl: "../fileupload/UeditorUpload"             //圖片上傳提交地址
        , imagePath: URL + "net/"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        , imageFieldName: "upfile"                   //圖片數據的key,若此處修改，需要在后台對應文件修改對應參數


        //工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實例時選擇自己需要的從新定義
        , toolbar: [
            'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
            'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | image video |',
            'horizontal print preview fullscreen'
        ]

添加接收文件控制器，並提供接口

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace FireFly.Admin.Controllers
{
    public class FileUploadController : Controller
    {
        private IHostingEnvironment hostingEnv;
        public FileUploadController(IHostingEnvironment env)
        {
            hostingEnv = env;
        }
        public async Task<IActionResult> UeditorUpload()
        {
            var files = Request.Form.Files;
            string callback = Request.Query["callback"];
            string editorId = Request.Query["editorid"];
            if (files != null && files.Count > 0)
            {
                var file = files[0];
                string contentPath = hostingEnv.WebRootPath;
                string fileDir = Path.Combine(contentPath, "upload");
                if (!Directory.Exists(fileDir))
                {
                    Directory.CreateDirectory(fileDir);
                }
                string fileExt = Path.GetExtension(file.FileName);
                string newFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExt;
                string filePath = Path.Combine(fileDir, newFileName);
                using (FileStream fs = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(fs);
                }
                var fileInfo = getUploadInfo("../../upload/" + newFileName, file.FileName,
                    Path.GetFileName(filePath), file.Length, fileExt);
                string json = BuildJson(fileInfo);
              
                Response.ContentType = "text/html";
                if (callback != null)
                {
                    await Response.WriteAsync(String.Format("<script>{0}(JSON.parse(\"{1}\"));</script>", callback, json));
                }
                else
                {
                    await Response.WriteAsync(json);
                }
                return View();
            }
            return NoContent();
        }
        private string BuildJson(Hashtable info)
        {
            List<string> fields = new List<string>();
            string[] keys = new string[] { "originalName", "name", "url", "size", "state", "type" };
            for (int i = 0; i < keys.Length; i++)
            {
                fields.Add(String.Format("\"{0}\": \"{1}\"", keys[i], info[keys[i]]));
            }
            return "{" + String.Join(",", fields) + "}";
        }
        /**
       * 獲取上傳信息
       * @return Hashtable
       */
        private Hashtable getUploadInfo(string URL, string originalName, string name, long size, string type, string state = "SUCCESS")
        {
            Hashtable infoList = new Hashtable();

            infoList.Add("state", state);
            infoList.Add("url", URL);
            infoList.Add("originalName", originalName);
            infoList.Add("name", Path.GetFileName(URL));
            infoList.Add("size", size);
            infoList.Add("type", Path.GetExtension(originalName));

            return infoList;
        }
    }

}

測試

總結

這里簡單實現了ueditor在asp.net core 2.0 web應用中的使用，需要實現的只是文件的上傳接口。