C# & WebApi & Editor.md 上传图片

在 *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; }
}
```

← 上一篇

回复内容 *

目录