ASP.NET MVC编辑视图中Input type file控件无法填充赋值问题

• 浏览器出于安全考虑，严格禁止服务端/前端JS给<input type="file">控件设置预填充值，防止网站未经用户授权私自读取本地文件，这个是底层规则，和ASP.NET MVC框架本身无关。
• HttpPostedFileBase类型的设计作用就是接收用户本次请求主动上传的文件流，它本身不支持在GET返回视图时赋值来回显文件选择状态，你给这个属性赋任何值都不会让页面的file控件出现选中文件的效果。

不要尝试给HttpPostedFileBase类型的FeaturedImage属性赋值，按照下面的流程处理即可：

1. GET请求加载编辑页逻辑 #

只需要给模型里的普通字段（Id、Title、已存的FeaturedImagePath）赋值即可，完全不需要处理FeaturedImage属性，示例代码：

public ActionResult Edit(int id)
{
    // 从数据库取已存的文章数据
    var postData = _postRepository.GetById(id);
    var viewModel = new PostAddRequest
    {
        Id = postData.Id,
        Title = postData.Title,
        FeaturedImagePath = postData.FeaturedImagePath
        // 无需给FeaturedImage赋值
    };
    return View(viewModel);
}

2. 视图层处理 #

不要尝试给file控件绑定值，分两部分展示：

• 已有封面预览：如果FeaturedImagePath不为空，就展示已上传的图片，加文字提示用户不选新文件就保留原图
• 文件上传控件正常输出，留空供用户自主选择是否上传新封面
• 必须给表单加enctype="multipart/form-data"属性，否则文件无法正常提交到后端

Razor视图示例：

@model PostAddRequest
@* 必须加enctype属性，否则文件传不上来 *@
@using (Html.BeginForm("Edit", "Post", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(m => m.Id)
    @Html.AntiForgeryToken()

    <div>
        @Html.LabelFor(m => m.Title)
        @Html.TextBoxFor(m => m.Title, new { @class = "form-control" })
    </div>

    <div>
        <label>文章封面</label>
        @* 已有封面预览 *@
        @if (!string.IsNullOrWhiteSpace(Model.FeaturedImagePath))
        {
            <div class="mb-2">
                <img src="@Url.Content(Model.FeaturedImagePath)" style="max-width: 280px;" alt="当前封面"/>
                <p class="text-small">如需替换封面请选择新文件，不选择则保留当前图片</p>
            </div>
        }
        @* 文件控件，不需要绑定任何值 *@
        <input type="file" name="FeaturedImage" accept="image/*" class="form-control"/>
    </div>

    <button type="submit" class="btn btn-primary mt-3">保存修改</button>
}

3. POST提交编辑逻辑 #

提交时判断用户是否上传了新文件，再决定是否更新封面路径：

• 如果FeaturedImage不为null且ContentLength > 0，说明用户上传了新封面，走文件保存逻辑，更新数据库里的FeaturedImagePath
• 如果FeaturedImage为null，说明用户没选择新文件，直接保留数据库中原有的FeaturedImagePath即可，不要把这个字段更新为空

示例代码：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(PostAddRequest model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }
    var existPost = _postRepository.GetById(model.Id);
    existPost.Title = model.Title;

    // 仅当用户上传了新文件时才更新封面
    if (model.FeaturedImage != null && model.FeaturedImage.ContentLength > 0)
    {
        // 自定义文件保存逻辑，以下为示例
        var fileExt = Path.GetExtension(model.FeaturedImage.FileName);
        var newFileName = Guid.NewGuid().ToString("N") + fileExt;
        var saveDir = Server.MapPath("~/upload/cover/");
        if (!Directory.Exists(saveDir))
        {
            Directory.CreateDirectory(saveDir);
        }
        var fullSavePath = Path.Combine(saveDir, newFileName);
        model.FeaturedImage.SaveAs(fullSavePath);
        // 更新封面路径
        existPost.FeaturedImagePath = "/upload/cover/" + newFileName;
    }

    _postRepository.Update(existPost);
    return RedirectToAction("Index");
}

• 不要试图通过前端JS给file控件赋值，所有现代浏览器都会拦截这类操作
• 编辑场景下文件控件留空是正常表现，配合已有图片预览就能让用户明确当前状态，不会产生困惑

内容的提问来源于stack exchange，提问作者ELOL