如何使用Blazor Server实现用户注册上传头像并按用户ID分类存储功能

1. 前置配置 #

首先调整项目的上传大小限制，在Program.cs中添加如下配置：

// 调整表单上传上限，此处设置为单文件最大10M，可根据需求自行修改
builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 10 * 1024 * 1024;
});

确保项目wwwroot目录下存在images文件夹，也可以在代码中自动创建。

2. 注册页面前端实现（.razor文件） #

使用Blazor自带的InputFile组件实现头像选择，可增加预览功能：

<EditForm Model="@RegisterModel" OnValidSubmit="@HandleRegister">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-item">
        <label>用户名</label>
        <InputText @bind-Value="RegisterModel.UserName" />
        <ValidationMessage For="@(() => RegisterModel.UserName)" />
    </div>

    <div class="form-item">
        <label>密码</label>
        <InputText type="password" @bind-Value="RegisterModel.Password" />
        <ValidationMessage For="@(() => RegisterModel.Password)" />
    </div>

    <div class="form-item">
        <label>选择头像</label>
        <InputFile OnChange="@OnAvatarSelect" accept="image/jpeg,image/png,image/jpg" />
        <!-- 头像预览 -->
        @if (AvatarPreview != null)
        {
            <img src="@AvatarPreview" style="width:100px;height:100px;border-radius:50%" alt="头像预览" />
        }
        <ValidationMessage For="@(() => RegisterModel.AvatarFile)" />
    </div>

    <button type="submit">完成注册</button>
</EditForm>

@code {
    // 注册表单模型
    private UserRegisterModel RegisterModel = new();
    // 头像预览Base64
    private string? AvatarPreview;

    // 头像选择回调
    private async Task OnAvatarSelect(InputFileChangeEventArgs e)
    {
        var file = e.File;
        if (file.Size > 10 * 1024 * 1024)
        {
            // 自行添加超出大小的提示逻辑
            return;
        }
        RegisterModel.AvatarFile = file;
        // 生成预览图
        var resizedFile = await file.RequestImageFileAsync(file.ContentType, 200, 200);
        var buffer = new byte[resizedFile.Size];
        await resizedFile.OpenReadStream().ReadAsync(buffer);
        AvatarPreview = $"data:{file.ContentType};base64,{Convert.ToBase64String(buffer)}";
    }
}

3. 注册模型定义 #

新建UserRegisterModel.cs类：

using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Components.Forms;

public class UserRegisterModel
{
    [Required(ErrorMessage = "请填写用户名")]
    public string UserName { get; set; }

    [Required(ErrorMessage = "请填写密码")]
    public string Password { get; set; }

    [Required(ErrorMessage = "请上传头像")]
    public IBrowserFile AvatarFile { get; set; }
}

4. 注册提交逻辑 #

在razor页面的@code块中添加提交逻辑，优先创建用户拿到用户ID后再存储头像：

[Inject]
private UserManager<IdentityUser> UserManager { get; set; }
[Inject]
private IWebHostEnvironment WebHostEnv { get; set; }

private async Task HandleRegister()
{
    // 1. 先创建用户，拿到生成的用户ID
    // 如果你没有使用ASP.NET Core Identity，替换为自己的用户插入逻辑即可
    var newUser = new IdentityUser
    {
        UserName = RegisterModel.UserName
    };
    var createRes = await UserManager.CreateAsync(newUser, RegisterModel.Password);
    if (!createRes.Succeeded)
    {
        foreach (var err in createRes.Errors)
        {
            ModelState.AddModelError(string.Empty, err.Description);
        }
        return;
    }
    var userId = newUser.Id;

    // 2. 创建对应用户ID的存储文件夹
    var userAvatarDir = Path.Combine(WebHostEnv.WebRootPath, "images", userId);
    if (!Directory.Exists(userAvatarDir))
    {
        Directory.CreateDirectory(userAvatarDir);
    }

    // 3. 存储头像到指定路径
    var avatarSavePath = Path.Combine(userAvatarDir, "fadi.jpg");
    await using var fs = new FileStream(avatarSavePath, FileMode.Create);
    await RegisterModel.AvatarFile.OpenReadStream(10 * 1024 * 1024).CopyToAsync(fs);

    // 后续逻辑：自动登录、页面跳转等
}

5. 注意事项 #

• 后端需要额外校验上传文件的格式和内容，仅靠前端accept限制无法避免恶意文件上传
• 生产环境建议把头像存储到对象存储服务，不要直接存在站点wwwroot目录，避免发布覆盖文件
• 如果支持用户修改头像，需要同时删除旧头像文件，避免占用多余存储空间

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