ASP.NET Core MVC字节图片转Base64问题：上传头像存库却无法显示

问题描述 #

在ASP.NET Core MVC项目中实现头像上传功能，图片已以字节形式存入数据库，但页面无法显示该头像，需确认数据库字节转Base64的代码是否正确。

模型类 #

public class Registerpage : IdentityUser
{
    public required string FirstName { get; set; }
    public required string LastName { get; set; }
    public byte[]? ProfilePicture { get; set; }
}

输入模型及后端方法 #

public class InputModel
{
    [Phone]
    [Display(Name = "Phone number")]
    public string PhoneNumber { get; set; }

    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    public byte[] ProfilePicture { get; set; }
}

private async Task LoadAsync(Registerpage user)
{
    var userName = await _userManager.GetUserNameAsync(user);
    var phoneNumber = await _userManager.GetPhoneNumberAsync(user);

    Username = userName;

    Input = new InputModel
    {
        PhoneNumber = phoneNumber,
        FirstName = user.FirstName,
        LastName = user.LastName,
        ProfilePicture = user.ProfilePicture,
    };
}

public async Task<IActionResult> OnPostAsync()
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    if (!ModelState.IsValid)
    {
        await LoadAsync(user);
        return Page();
    }
    
    if (Request.Form.Files.Count > 0)
    {
        var formfile = Request.Form.Files.FirstOrDefault();
        using (MemoryStream stream = new MemoryStream())
        {
            await formfile.CopyToAsync(stream);
            user.ProfilePicture = stream.ToArray();
        }
        await _userManager.UpdateAsync(user);
    }
    //Other data 
    await _signInManager.RefreshSignInAsync(user);
    StatusMessage = "Your profile has been updated";
    return RedirectToPage();
}

Index视图页面 #

@page
@model IndexModel
@{
    ViewData["Title"] = "Profile";
    ViewData["ActivePage"] = ManageNavPages.Index;
}
@{
    string base64tostring = Convert.ToBase64String(Model.Input.ProfilePicture, 0, Model.Input.ProfilePicture.Length);
    var Imagesrc = string.Format( "data:Image/*;base64" + base64tostring);
}
<h3>@ViewData["Title"]</h3>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
    <div class="col-md-6">
        <form id="profile-form" method="post" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
            @*previous code*@
            <div >
                <input type="file" asp-for="Input.ProfilePicture" onchange="loadfile(event)" class="form-control"/>
                <br />
                @if(Model.Input.ProfilePicture!=null)
                {
                    <img id="Image" alt="Profile Picture" 
                        src="@Imagesrc"
                        style="width:200px;height:200px" />

                }
                else
                {
                    <img src="~/Images/Profile Picture.jpg" style="width:200px;height:200px" />

                }
            </div>
         <br />
            <button id="update-profile-button" type="submit" class="w-100 btn btn-lg btn-primary">Save</button>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        var loadfile = function (event) {
            var reader = new FileReader();
            reader.onload = function () {
                var Image = document.getElementById('Image');
                Image.src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
}

问题原因及修复方案 #

核心错误 #

视图中Base64转换及Data URI拼接存在三处问题：

1. Data URI格式错误：正确格式应为data:image/*;base64,，原代码缺少分隔逗号，且Image应为小写image。
2. String.Format用法错误：原代码未使用占位符，直接拼接字符串，导致格式混乱。
3. 未处理空值：未判断Model.Input.ProfilePicture是否为null，会引发空引用异常。

修复后的视图代码 #

将视图中的Base64转换部分替换为：

@{
    // 默认显示占位图
    string imageSrc = "~/Images/Profile Picture.jpg";
    // 仅当头像字节数组存在且不为空时转换为Base64
    if (Model.Input.ProfilePicture != null && Model.Input.ProfilePicture.Length > 0)
    {
        string base64String = Convert.ToBase64String(Model.Input.ProfilePicture);
        imageSrc = $"data:image/*;base64,{base64String}";
    }
}

同时修改img标签部分，简化判断逻辑：

<img id="Image" alt="Profile Picture" 
     src="@imageSrc"
     style="width:200px;height:200px" />

额外检查点 #

1. 确认数据库中ProfilePicture字段存储的字节数组完整，上传时OnPostAsync中的流转换逻辑正确。
2. 输入模型InputModel中的ProfilePicture可改为byte[]?，避免空值赋值问题。

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