ASP.NET Core 8 MVC图片上传异常：已选文件仍提示‘Image字段必填’

1. 参数绑定不匹配：视图中文件输入框通过asp-for="Image"绑定到模型的字符串属性Image，生成的表单字段名为Image；但控制器接收文件的参数是IFormFile image（小写开头），结合数据库验证逻辑后，文件无法正确传递到控制器，最终product.Image因未赋值保持null。
2. 数据库验证触发：即使模型的Image属性未标记[Required]，如果数据库中对应的字段被配置为非空（NOT NULL），EF Core在保存数据时会自动验证，当product.Image为null时就会抛出The Image field is required错误。
3. 绑定类型错误：文件上传控件应绑定到IFormFile类型而非字符串类型，当前绑定方式不符合ASP.NET Core文件上传规范，易导致绑定失败。

方案一：快速修正绑定匹配问题 #

1. 修改视图文件输入框 #

移除对模型Image属性的绑定，直接指定字段名为image（与控制器参数名一致）：

<div class="form-group row mb-3">
    <div class="col-2">
        <label>Image</label>
    </div>
    <div class="col-5">
        <input name="image" class="form-control" type="file" />
    </div>
    <span class="text-danger">@Html.ValidationMessage("image")</span>
</div>

2. 验证控制器逻辑 #

确保控制器中image参数能正确接收文件，选择文件提交后，image参数不为null，代码会执行赋值逻辑，将product.Image设置为文件路径，避免数据库验证错误。

方案二：规范模型与绑定设计（推荐） #

1. 更新模型类 #

添加临时用于接收上传文件的IFormFile属性，标记[NotMapped]避免映射到数据库：

public class Products
{
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public decimal Price { get; set; }
    // 若数据库允许图片为空，可保留此属性；若必填则添加[Required]
    public string Image { get; set; }
    [Display(Name = "Product Color")]
    public string ProductColor { get; set; }

    [Required]
    [Display(Name = "Available")]
    public bool IsAvailable { get; set; }

    [Display(Name = "Product Type")]
    [Required]
    public int ProductTypeId { get; set; }

    [ForeignKey("ProductTypeId")]
    public ProductTypes ProductTypes { get; set; }

    [Display(Name = "Special Tag")]
    [Required]
    public int SpecialTagId { get; set; }

    [ForeignKey("SpecialTagId")]
    public SpecialTag SpecialTag { get; set; }

    // 新增临时文件接收属性，不映射到数据库
    [NotMapped]
    [Display(Name = "Image")]
    public IFormFile ImageFile { get; set; }
}

2. 修改视图绑定 #

将文件输入框绑定到新增的ImageFile属性：

<div class="form-group row mb-3">
    <div class="col-2">
        <label asp-for="ImageFile"></label>
    </div>
    <div class="col-5">
        <input asp-for="ImageFile" class="form-control" type="file" />
    </div>
    <span asp-validation-for="ImageFile" class="text-danger"></span>
</div>

3. 调整控制器方法 #

直接从模型的ImageFile属性获取上传文件，无需单独接收IFormFile参数：

[HttpPost]
public async Task<IActionResult> Create(Products product)
{
    if (ModelState.IsValid)
    {
        if (product.ImageFile != null)
        {
            // 优化路径拼接方式，避免字符串拼接错误
            var imagesDir = Path.Combine(_he.WebRootPath, "images");
            if (!Directory.Exists(imagesDir))
            {
                Directory.CreateDirectory(imagesDir);
            }
            var filePath = Path.Combine(imagesDir, Path.GetFileName(product.ImageFile.FileName));
            await product.ImageFile.CopyToAsync(new FileStream(filePath, FileMode.Create));
            product.Image = $"images/{product.ImageFile.FileName}";
        }

        _db.Products.Add(product);
        await _db.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    return View(product);
}

额外检查项 #

• 确认数据库中Image字段配置：如果允许商品无图，需将字段设置为可空（NULL）；如果必须有图，需给模型的Image属性添加[Required]，并给ImageFile也添加[Required]以触发客户端验证。

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