C#+ckeidtor5实现图片上传
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CkEditor5</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
.editor-container {
width: 100%;
height: 100%;
}
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="editor-container">
<textarea id="editor">
<p>Hello World!</p>
</textarea>
</div>
<script src="lib/ckeditor.js"></script>
<script src="lib/translations/zh-cn.js"></script>
<script>
ClassicEditor.create(document.querySelector('#editor'), {
licenseKey: 'GPL',
language: 'zh-cn',
simpleUpload: {
//同一个域名下可以不写
uploadUrl: '/Handler1.ashx',
},
})
.then(editor => {
window.editor = editor;
})
.catch(error => {
console.error('There was a problem initializing the editor.', error);
});
</script>
</body>
</html>
后端接口如下
using System.IO;
using System.Linq;
using System.Web;
namespace CkEditorStu02
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public string GetCurrentDomainName()
{
// 获取当前请求的协议（HTTP或HTTPS）
string scheme = HttpContext.Current.Request.Url.Scheme;
// 获取当前请求的主机名（包括端口号）
string host = HttpContext.Current.Request.Url.Host;
// 如果需要，可以在这里添加端口号
int port = HttpContext.Current.Request.Url.Port;
// 组合协议和主机名以形成完整的域名
string domainName = scheme + "://" + host + ":" + port;
return domainName;
}
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.AppendHeader("Access-Control-Allow-Origin", "*"); // 允许来自任何域的请求
context.Response.AppendHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET"); // 允许的请求方法
context.Response.AppendHeader("Access-Control-Allow-Headers", "Content-Type"); // 允许的请求头
var files = context.Request.Files;
if (files == null || files.Count <= 0)
{
var result = $"{{\"error\": {{\"message\": \"文件不存在\"}}}}";
context.Response.Write(result);
return;
}
bool isLarge = false;
string fileName = "";
for (int i = 0; i < files.Count; i++)
{
var file = files[i];
//判断文件大小
//大小限制
int maxSize = 1 * 1024 * 1024; //最大是2M(转换为字节)
if (file.ContentLength > maxSize)
{
context.Response.Write($"{{\"error\": {{\"message\": \"上传文件大小超出限制\"}}}}");
return;
}
//扩展名限制
string[] exts = { "image/jpg", "image/jpeg", "image/gif", "image/png" };
if (!exts.Contains(file.ContentType.ToLower()))
{
context.Response.Write("必须上传图片文件");
return;
}
fileName = Path.GetFileName(file.FileName);
file.SaveAs(Path.Combine(context.Server.MapPath("~"), fileName));
break;
}
var res = $"{{\"url\": \"{GetCurrentDomainName()}/{fileName}\"}}";
//同一个域名下，下面的代码也可以
//var res = $"{{\"url\": \"/{fileName}\"}}";
context.Response.Write(res);
/*
成功：
{
"url": "https://example.com/images/foo.jpg"
}
失败:
{
"error": {
"message": "The image upload failed because the image was too big (max 1.5MB)."
}
}
*/
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
原文地址：https://blog.csdn.net/qq_36437991/article/details/145189066
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！