在MVC中如何保存未通过上传方式提交至数据库的图片？

嘿，我懂你的情况了——你没用到<input type="file">，而是通过修改#copiedimage里的img标签来更换头像，现在要把这个修改后的头像存入数据库，之前查的HttpPostedFileBase相关方案完全不适用对吧？别慌，咱们换个思路来实现，分前端和后端两步走：

一、前端：抓取修改后的头像数据并提交 #

因为没有文件上传控件，咱们得先把img里的头像转换成可传输的格式，最方便的就是Base64字符串，用Canvas就能轻松实现：

1. 把当前头像转成Base64 #

写个小函数来做转换：

function getAvatarBase64() {
    const avatarImg = document.querySelector('#copiedimage img');
    const canvas = document.createElement('canvas');
    // 让canvas和头像尺寸一致，要是你需要裁剪头像，这里可以调整宽高
    canvas.width = avatarImg.width;
    canvas.height = avatarImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(avatarImg, 0, 0);
    // 转换成png格式的Base64，要是想用jpeg，把第二个参数改成0.9（质量值）就行
    return canvas.toDataURL('image/png');
}

2. 把数据提交到后端 #

用Fetch API（或者jQuery.ajax）把Base64字符串传给后端接口，记得去掉Base64开头的标识（后端处理更省心）：

async function saveAvatar() {
    const base64Full = getAvatarBase64();
    // 去掉开头的"data:image/png;base64,"前缀
    const pureBase64 = base64Full.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
    
    try {
        const response = await fetch('/Account/SaveAvatar', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 别忘了带上ASP.NET的防CSRF Token，不然请求会被拦截
                'X-CSRF-Token': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify({ avatarBase64: pureBase64 })
        });
        
        const result = await response.json();
        if (result.success) {
            alert('头像保存成功啦！');
        } else {
            alert(`保存失败：${result.message}`);
        }
    } catch (err) {
        alert('提交请求出错了：' + err.message);
    }
}

二、后端：接收数据并存入数据库 #

不用HttpPostedFileBase，咱们直接接收Base64字符串，转成字节数组后存入数据库的varbinary类型字段就好：

1. 先整个接收模型（可选，但更规范） #

public class AvatarSaveRequest
{
    public string AvatarBase64 { get; set; }
}

2. 控制器里写处理方法 #

[HttpPost]
public async Task<IActionResult> SaveAvatar([FromBody] AvatarSaveRequest request)
{
    try
    {
        if (string.IsNullOrWhiteSpace(request.AvatarBase64))
        {
            return Json(new { success = false, message = "头像数据不能为空" });
        }
        
        // 把Base64字符串转成字节数组
        byte[] avatarBytes = Convert.FromBase64String(request.AvatarBase64);
        
        // 这里换成你自己的数据库操作逻辑，比如更新当前登录用户的头像字段
        // 示例：假设用Identity框架获取当前用户
        var currentUser = await _userManager.GetUserAsync(User);
        if (currentUser == null)
        {
            return Json(new { success = false, message = "未找到当前用户" });
        }
        
        currentUser.Avatar = avatarBytes;
        await _userManager.UpdateAsync(currentUser);
        
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

三、几个要注意的点 #

• 图片大小控制：Base64字符串比原图片大30%左右，所以最好在前端用Canvas压缩一下（比如限制头像最大尺寸为200x200），避免传太大的数据，数据库字段记得设成varbinary(max)。
• 格式兼容：如果前端可能传入不同格式的图片，你可以通过Base64开头的标识判断格式，或者统一转换成png/jpeg存储。
• CSRF防护：ASP.NET默认会拦截没有CSRF Token的POST请求，所以一定要带上那个Token。
• 适配你的前端场景：不管你是用裁剪插件、拖拽上传还是其他方式修改img的src，只要能获取到img的内容，上面的方法都能用上。

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