如何预填充ASP.NET Core产品编辑页的IFormFile输入框？

核心问题 #

浏览器出于安全策略限制，无法通过编程方式为<input type="file">输入框预设文件值，所以你后端构造的IFormFile对象无法在前端渲染出已选中的文件状态。这是所有浏览器的通用限制，目的是防止恶意网站未经用户授权读取本地文件。

正确实现思路 #

放弃直接填充文件输入框的尝试，改用「显示现有图片预览 + 保留新图片上传选项」的方案，具体步骤如下：

1. 调整ViewModel #

为AdminEditProductVM新增ImageUrl属性，用于传递现有图片的访问路径（无需再构造IFormFile）：

public class AdminEditProductVM
{
    public Guid Id { get; set; }
    public string SKU { get; set; }
    public string Name { get; set; }
    public string Brand { get; set; }
    public string Model { get; set; }
    // 用于上传新图片
    public IFormFile? Image { get; set; }
    // 用于显示现有图片的URL
    public string? ImageUrl { get; set; }
    public int WeightInGrams { get; set; }
    public string Size { get; set; }
    public int Quantity { get; set; }
    public decimal RetailPrice { get; set; }
    public decimal DiscountedPrice { get; set; }
    public string ShortDescription { get; set; }
    public string FullDescription { get; set; }
}

2. 修改GET请求方法 #

移除构造IFormFile的代码，直接将现有图片路径赋值给ImageUrl：

public IActionResult EditProduct(Guid id)
{
    var toEdit = _context.Products.Find(id);
    if (toEdit is null)
        throw new ArgumentOutOfRangeException(nameof(id));

    var vm = new AdminEditProductVM
    {
        Id = id,
        SKU = toEdit.SKU,
        Name = toEdit.Name,
        Brand = toEdit.Brand,
        Model = toEdit.Model,
        // 直接传递现有图片路径
        ImageUrl = toEdit.ImagePath,
        WeightInGrams = toEdit.WeightInGrams,
        Size = toEdit.Size,
        Quantity = toEdit.Quantity,
        RetailPrice = toEdit.RetailPrice,
        DiscountedPrice = toEdit.DiscountedPrice,
        ShortDescription = toEdit.ShortDescription,
        FullDescription = toEdit.FullDescription
    };

    return View(vm);
}

3. 前端视图实现（Razor示例） #

显示现有图片预览，同时保留文件上传输入框：

@model AdminEditProductVM

<div class="form-group">
    <label>当前产品图片</label>
    @if (!string.IsNullOrEmpty(Model.ImageUrl))
    {
        <!-- 渲染现有图片预览 -->
        <img src="@Url.Content(Model.ImageUrl)" alt="产品图片" style="max-width: 200px; margin: 10px 0;" />
    }
    <p class="text-muted">如需替换图片，请选择新的图片文件</p>
</div>

<div class="form-group">
    <label for="Image">上传新图片</label>
    <input type="file" asp-for="Image" class="form-control" accept="image/jpeg, image/png" />
    <span asp-validation-for="Image" class="text-danger"></span>
</div>

<!-- 其他产品属性输入字段 -->
<div class="form-group">
    <label asp-for="SKU"></label>
    <input asp-for="SKU" class="form-control" />
</div>
<!-- 省略其他字段... -->

4. 修改POST请求方法 #

处理编辑请求时，判断用户是否上传了新图片，仅在有新图片时替换旧文件：

[HttpPost]
public async Task<IActionResult> EditProduct(AdminEditProductVM vm)
{
    if (!ModelState.IsValid)
        return View(vm);

    var product = _context.Products.Find(vm.Id);
    if (product is null)
        throw new ArgumentOutOfRangeException(nameof(vm.Id));

    // 处理新图片上传
    if (vm.Image is not null && vm.Image.Length > 0)
    {
        // 删除旧图片（可选，避免冗余文件）
        var oldImageFullPath = Path.Combine(_hostingEnvironment.WebRootPath, product.ImagePath![2..]);
        if (System.IO.File.Exists(oldImageFullPath))
        {
            System.IO.File.Delete(oldImageFullPath);
        }

        // 保存新图片
        var webRootPath = _hostingEnvironment.WebRootPath;
        var newImagePath = Path.Combine(webRootPath, "img/products", vm.SKU! + ".jpg");
        using (var stream = new FileStream(newImagePath, FileMode.Create))
        {
            await vm.Image.CopyToAsync(stream);
        }

        // 更新数据库中的图片路径
        product.ImagePath = "~/img/products/" + vm.SKU + ".jpg";
    }
    // 未上传新图片时，保留原图片路径不变

    // 更新产品其他属性
    product.SKU = vm.SKU;
    product.Name = vm.Name;
    product.Brand = vm.Brand;
    product.Model = vm.Model;
    product.WeightInGrams = vm.WeightInGrams;
    product.Size = vm.Size;
    product.Quantity = vm.Quantity;
    product.RetailPrice = vm.RetailPrice;
    product.DiscountedPrice = vm.DiscountedPrice;
    product.ShortDescription = vm.ShortDescription;
    product.FullDescription = vm.FullDescription;
    product.LastUpdated = DateTime.Now;

    _context.SaveChanges();
    return RedirectToAction(nameof(ManageProduct));
}

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