Skip to content
欢迎扫码关注公众号

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

editormd 初始化时设置如下参数即可以在添加图片时显示 本地上传 按钮。

js
{
    imageUpload: true,
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL: "api/Image/Upload",
}

在这里我遇到了点击文件上传按钮始终不显示文件选择框的问题,经调查发现是文件选择按钮和文件上传按钮的显示层级乱了导致的。
正常情况下这两个控件虽然是重叠的,但是文件选择按钮应该在上层,我的网页上不知为何是文件上传按钮显示在上层。
解决方案也很简单,将文件选择按钮的 z-index 属性设大一点就可以了。示例如下:

css
input[type="file"] {
    z-index: 100;
}

返回值需要匹配如下结构:

js
{
    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; }
}

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.