ASP.NET Core 5.0 MVC编辑记录时如何实现图片上传

1. 修改前端表单 #

表单必须添加enctype="multipart/form-data"才能正确传递文件，同时可限制仅选择图片类型：

<form asp-action="Edit" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="IdEmpresa" />
    <div class="form-group mt-3">
        <label asp-for="CodEmpresa" class="control-label"></label>
        <input required asp-for="CodEmpresa" class="form-control" />
        <span asp-validation-for="CodEmpresa" class="text-danger"></span>
    </div>
    <div class="form-group mt-3">
        <label asp-for="Empresa" class="control-label"></label>
        <input required asp-for="Empresa" class="form-control" />
        <span asp-validation-for="Empresa" class="text-danger"></span>
    </div>
    <div class="form-group mt-3">
        <label asp-for="Contacto" class="control-label"></label>
        <input required asp-for="Contacto" class="form-control" />
        <span asp-validation-for="Contacto" class="text-danger"></span>
    </div>
    <div class="form-group mt-3">
        <label asp-for="Imagen" class="control-label"></label>
        <input asp-for="Imagen" class="form-control" type="file" accept="image/*" />
        <span asp-validation-for="Imagen" class="text-danger"></span>
    </div>
    <br />
    <div class="form-group  d-flex justify-content-end">
        <input type="submit" value="Actualizar" class="btn btn-primary bg-primary" />
    </div>
</form>

说明：accept="image/*"用于限制用户仅选择图片文件，enctype="multipart/form-data"是文件上传的必要配置。

2. 修改后端控制器Edit方法 #

添加IFormFile参数接收上传文件，同时处理文件保存、路径存储逻辑：

private readonly IWebHostEnvironment _webHostEnvironment;
private readonly YourDbContext _context;

// 构造函数注入IWebHostEnvironment用于获取wwwroot路径
public YourControllerName(YourDbContext context, IWebHostEnvironment webHostEnvironment)
{
    _context = context;
    _webHostEnvironment = webHostEnvironment;
}

public async Task<IActionResult> Edit(int id, [Bind("IdEmpresa,CodEmpresa,Empresa,Contacto")] MnEmpresa mnEmpresa, IFormFile? Imagen)
{
    if (id != mnEmpresa.IdEmpresa)
    {
        return NotFound();
    }

    var existingEmpresa = await _context.MnEmpresas.FirstOrDefaultAsync(x => x.IdEmpresa == id);
    if (existingEmpresa == null)
    {
        return NotFound();
    }

    if (ModelState.IsValid)
    {
        try
        {
            // 处理图片上传逻辑
            if (Imagen != null && Imagen.Length > 0)
            {
                // 定义图片保存目录（wwwroot下的empresaimages，不存在则自动创建）
                var uploadDir = Path.Combine(_webHostEnvironment.WebRootPath, "empresaimages");
                if (!Directory.Exists(uploadDir))
                {
                    Directory.CreateDirectory(uploadDir);
                }

                // 生成唯一文件名，避免覆盖
                var fileName = Guid.NewGuid().ToString() + Path.GetExtension(Imagen.FileName);
                var filePath = Path.Combine(uploadDir, fileName);

                // 保存文件到服务器
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await Imagen.CopyToAsync(stream);
                }

                // 可选：删除旧图片，避免磁盘浪费
                if (!string.IsNullOrEmpty(existingEmpresa.Imagen))
                {
                    var oldFilePath = Path.Combine(_webHostEnvironment.WebRootPath, existingEmpresa.Imagen.TrimStart('/'));
                    if (System.IO.File.Exists(oldFilePath))
                    {
                        System.IO.File.Delete(oldFilePath);
                    }
                }

                // 将相对路径赋值给模型，用于后续存储和前端显示
                mnEmpresa.Imagen = $"/empresaimages/{fileName}";
            }
            else
            {
                // 用户未上传新图片，保留原有路径
                mnEmpresa.Imagen = existingEmpresa.Imagen;
            }

            // 更新数据库
            _context.Entry(existingEmpresa).State = EntityState.Detached;
            _context.Update(mnEmpresa);
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!MnEmpresaExists(mnEmpresa.IdEmpresa))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return RedirectToAction(nameof(Index));
    }

    // 验证失败时，还原原有图片路径
    mnEmpresa.Imagen = existingEmpresa.Imagen;
    return View(mnEmpresa);
}

private bool MnEmpresaExists(int id)
{
    return _context.MnEmpresas.Any(e => e.IdEmpresa == id);
}

3. 可选：添加文件验证逻辑 #

可在控制器中添加文件类型、大小的验证，避免无效文件上传：

if (Imagen != null)
{
    var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
    var fileExtension = Path.GetExtension(Imagen.FileName).ToLower();
    
    if (!allowedExtensions.Contains(fileExtension))
    {
        ModelState.AddModelError("Imagen", "仅支持JPG、PNG、GIF格式的图片");
        mnEmpresa.Imagen = existingEmpresa.Imagen;
        return View(mnEmpresa);
    }

    // 限制文件大小不超过2MB
    if (Imagen.Length > 2 * 1024 * 1024)
    {
        ModelState.AddModelError("Imagen", "图片大小不能超过2MB");
        mnEmpresa.Imagen = existingEmpresa.Imagen;
        return View(mnEmpresa);
    }
}

4. 注意事项 #

• 确保服务器上wwwroot/empresaimages目录有写入权限；
• 生产环境建议使用云存储服务（如对象存储）代替本地存储，避免服务器迁移时丢失文件；
• 前端显示图片可使用<img src="@Model.Imagen" alt="Empresa Logo" />。

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