asp.net core整合kindeditor實作圖片上傳功能

本文為大家分享了asp.net core 如何整合kindeditor並實現圖片上傳功能的具體方法，供大家參考，具體內容如下

準備工作

1.visual studio 2015 update3開發環境

2.net core 10. .1 以上版本

目錄

新建asp.net core web專案

下載kindeditor

增加圖片上傳控制器

設定kindeditor參數

程式碼下載圖片上傳控制器

設定kindeditor參數

程式碼下載圖片上傳控制器

設定kindeditor參數 asp.net core項目，這裡命名為kindeditor

選中web應用程式

下載kindeditor

這裡我們下載了一個系統自帶的樣本，去壓網後新樣本大wwwroot中

修改views/index.cshtml

@{
 ViewData["Title"] = "Home Page";
}
<link href="~/kindeditor/themes/default/default.css" rel="stylesheet" />
<script src="~/kindeditor/kindeditor-min.js"></script>
<script src="~/kindeditor/lang/zh_CN.js"></script>
  
<div class="row">
 <textarea id="detail_desc" name="detail_desc" style="width:700px;height:300px;">
   
 </textarea> 
</div>
<script type="text/javascript">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;
  });
 }); 
</script>

運行一下現在就可以看到kindeditor已經整合進來了。

增加圖片上傳控制器

注意返回是一個json對象，因此建了一個簡單的對象返回。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Microsoft.Net.Http.Headers;
using Microsoft.AspNetCore.Hosting;
using System.IO;
namespace kindeditortest.Controllers
{
 public class HomeController : Controller
 {
  private IHostingEnvironment hostingEnv;
  public IActionResult Index()
  {
   return View();
  }
  public HomeController(IHostingEnvironment env)
  {
   this.hostingEnv = env;
  }
  /// <summary>
 /// Kindeditor图片上传
  /// </summary>
 /// <param name="imgFile">Kindeditor图片上传自带的命名，不可更改名称</param>
 /// <param name="dir">不可更改名称 这里没有用到dir</param>
 /// <returns></returns>
 public IActionResult KindeditorPicUpload(IList<IFormFile> imgFile, string dir)
  {
   PicUploadResponse rspJson = new PicUploadResponse() { error = 0, url = "/upload/" };
   long size = 0;
   string tempname = "";
   foreach (var file in imgFile)
   {
    var filename = ContentDispositionHeaderValue
        .Parse(file.ContentDisposition)
        .FileName
        .Trim(&#39;"&#39;);
    var extname = filename.Substring(filename.LastIndexOf("."), filename.Length - filename.LastIndexOf("."));
    var filename1 = System.Guid.NewGuid().ToString() + extname;
    tempname = filename1;
    var path = hostingEnv.WebRootPath;
    filename = hostingEnv.WebRootPath + $@"\upload\{filename1}";
    size += file.Length;
    using (FileStream fs = System.IO.File.Create(filename))
    {
     file.CopyTo(fs);
     fs.Flush();
     //这里是业务逻辑
    }
   }
   rspJson.error = 0;
   rspJson.url = $@"../../upload/" + tempname;
   return Json(rspJson);
  }
  public IActionResult About()
  {
   ViewData["Message"] = "Your application description page.";
   return View();
  }
  public IActionResult Contact()
  {
   ViewData["Message"] = "Your contact page.";
   return View();
  }
  public IActionResult Error()
  {
   return View();
  }
 }
 public class PicUploadResponse
 {
  public int error { get; set; }
  public string url { get; set; }
 }
}

   

設定kindeditor參數

<script type="text/javascript">
 //实例化编辑器
 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(&#39;editor&#39;)就能拿到相关的实例
 KindEditor.ready(function (K) {
  window.editor = K.create(&#39;#detail_desc&#39;, {
   width: &#39;98%&#39;,
   height: &#39;500px&#39;,
   uploadJson: &#39;/home/KindeditorPicUpload&#39;,
   fileManagerJson: &#39;/home/KindeditorPicUpload&#39;,
   allowFileManager: true
  });
 });
</script>

   

網，對大家有所幫助