佳佳的博客
Menu
首页
C# & WebApi & Editor.md 上传图片
Posted by
佳佳
on 2020-12-19
IT
C#
Editor.md
<!-- # C# & WebApi & Editor.md 上传图片 --> <!-- csharp-webapi-editormd-upload-image --> 在 *editormd* 初始化时设置如下参数即可以在添加图片时显示 *本地上传* 按钮。 ```json { imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "api/Image/Upload", } ``` 在这里我遇到了点击文件上传按钮始终不显示文件选择框的问题,经调查发现是文件选择按钮和文件上传按钮的显示层级乱了导致的。 正常情况下这两个控件虽然是重叠的,但是文件选择按钮应该在上层,我的网页上不知为何是文件上传按钮显示在上层。 解决方案也很简单,将文件选择按钮的 *z-index* 属性设大一点就可以了。示例如下: ```css input[type="file"] { z-index: 100; } ``` 返回值需要匹配如下结构: ```json { success: 1, message: "上传成功", url: "/files/2020/12/19/sample.jpg" } ``` 下面是图片上传 *WebAPI* 的代码和返回值的定义: ```csharp /// <summary> /// 上传文件 /// </summary> [HttpPost] public UploadImageResult Upload() { int success = 1; string urlPath = $"/files/{DateTime.Now.Year}/{DateTime.Now.Month}/{DateTime.Now.Day}/"; try { string uploadPath = HttpContext.Current.Server.MapPath($"~{urlPath}"); HttpRequest request = System.Web.HttpContext.Current.Request; HttpFileCollection fileCollection = request.Files; // 判断是否有文件 if (fileCollection.Count > 0) { // 获取文件 HttpPostedFile httpPostedFile = fileCollection[0]; string fileExtension = Path.GetExtension(httpPostedFile.FileName);// 文件扩展名 string fileName = Guid.NewGuid().ToString() + fileExtension;// 名称 string filePath = uploadPath + httpPostedFile.FileName;// 上传路径 // 如果目录不存在则要先创建 if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } // 保存新的文件 while (File.Exists(filePath)) { fileName = Guid.NewGuid().ToString() + fileExtension; filePath = uploadPath + fileName; } httpPostedFile.SaveAs(filePath); success = 1; urlPath += fileName; } } catch (Exception) { success = 0; } return new UploadImageResult() { success = success, message = success == 1 ? "上传成功" : "上传失败", url = success == 1 ? urlPath : "", }; } ``` ```csharp public class UploadImageResult { /// <summary> /// 0 表示上传失败,1 表示上传成功 /// </summary> public int success { get; set; } /// <summary> /// 提示的信息,上传成功或上传失败及错误信息等。 /// </summary> public string message { get; set; } /// <summary> /// 上传成功时才返回 /// </summary> public string url { get; set; } } ```
版权声明:原创文章,未经允许不得转载。
https://www.liujiajia.me/2020/12/19/csharp-webapi-editormd-upload-image
“Buy me a nongfu spring”
« 动态指定 Spring Boot 服务的名字
OTS 批量写入时报 UnsupportedOperationException 异常 »
昵称
*
电子邮箱
*
回复内容
*
(回复审核后才会显示)
提交
目录
AUTHOR
刘佳佳
江苏 - 苏州
软件工程师
梦嘉集团