创建新用户时头像上传返回Null的问题及用户列表展示需求

核心问题原因 #

1. 表单未配置文件上传编码：缺少enctype="multipart/form-data"属性，导致文件无法正确提交到后端。
2. 模型绑定不匹配：前端input绑定的是User.Photo，但后端逻辑直接使用独立的Photo属性，未与前端字段对应，导致Photo始终为null。
3. 旧文件删除逻辑未执行：代码中仅定义了旧文件路径，但未实际执行删除操作。

分步修复 #

1. 修复前端表单

给包含文件上传的表单添加enctype="multipart/form-data"：

<form method="post" enctype="multipart/form-data">
    <!-- 其他用户信息输入字段 -->
    <div class="form-group">
        <label asp-for="User.Photo" class="control-label"></label>
        <input type="file" asp-for="User.Photo" class="custom-file-input form-control" />
    </div>
    <button type="submit" class="btn btn-primary">创建用户</button>
</form>

2. 调整User模型

确保模型中区分数据库存储字段和上传临时字段：

public class User
{
    // 其他核心字段：Id, Name, Email, RoleID等
    public string ProfilePicturePath { get; set; } // 存储头像文件名到数据库

    [NotMapped] // 标记为不映射到数据库，仅用于接收上传文件
    public IFormFile Photo { get; set; }
}

3. 修复后端OnPostAsync方法

将文件处理逻辑关联到User.Photo，并补全旧文件删除逻辑：

public async Task<IActionResult> OnPostAsync()
{
    var currentUser = HttpContext.Session.GetString("Username");

    if (currentUser != null)
    {
        var findUser = _context.User.FirstOrDefault(u => u.Name == currentUser);
        if(findUser == null)
        {
            return Page();
        }
        int RoleID = findUser.RoleID;
        if(RoleID == 1)  
        {
            IsAdmin = false;
            return Page();
        }
    }

    // 改用User.Photo获取上传文件
    if (User.Photo != null)
    {
        // 若存在旧头像则删除
        if (!string.IsNullOrEmpty(User.ProfilePicturePath))
        {
            string oldFilePath = Path.Combine(_environment.WebRootPath, "ProfilePicture", User.ProfilePicturePath);
            if (System.IO.File.Exists(oldFilePath))
            {
                System.IO.File.Delete(oldFilePath);
            }
        }
        // 传入上传文件处理
        User.ProfilePicturePath = ProcessUploadedFile(User.Photo);
    }

    if (!ModelState.IsValid)
    {
        return Page();
    }

    _context.User.Add(User);
    await _context.SaveChangesAsync();

    return RedirectToPage("./Index");
}

4. 修改ProcessUploadedFile方法

改为接收IFormFile参数，并确保上传目录存在：

private string ProcessUploadedFile(IFormFile photo)
{
    string uniqueFileName = null;
    if(photo != null)
    {
        string uploadsFolder = Path.Combine(_environment.WebRootPath, "ProfilePicture");
        // 确保上传目录存在，避免报错
        if (!Directory.Exists(uploadsFolder))
        {
            Directory.CreateDirectory(uploadsFolder);
        }
        uniqueFileName = Guid.NewGuid().ToString() + "_" + photo.FileName;
        string filePath = Path.Combine(uploadsFolder, uniqueFileName);  
        using(var fileStream = new FileStream(filePath, FileMode.Create))
        {
            photo.CopyTo(fileStream);
        }
    }
    return uniqueFileName;
}

5. Index页面展示用户头像

在卡片组件中通过ProfilePicturePath加载头像：

@foreach(var user in Model.Users)
{
    <div class="card mb-3" style="max-width: 18rem;">
        <img src="@Url.Content($"~/ProfilePicture/{user.ProfilePicturePath}")" 
             alt="@user.Name" 
             class="card-img-top" 
             onerror="this.src='~/ProfilePicture/default-avatar.png'"> <!-- 可选：添加默认头像容错 -->
        <div class="card-body">
            <h5 class="card-title">@user.Name</h5>
            <p class="card-text">邮箱：@user.Email</p>
        </div>
    </div>
}

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