如何在MVC中保存未上传到数据库的图像？

Question

这个网站上的每个问题，我找到的每个教程都是关于使用 HttpPostedFileBase 在数据库中保存上传的图像。而不是这个：

<input type='file'>

我的Registration.cshtml里有这个：

<div id="copiedimage">
    <img class="default-avatar" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='default-avatar' />
</div>

此 div 包含 img，可能会更改。从图片上看会更清楚：

所以，这个左圈头像其实是img这个div。页面加载的默认图像来自 Url.Content，但如果用户从滑块单击图像，或者如果他选择自己的图片（马）并单击它，则该图像将被更改。

我有 UserAvatar 型号：

public class UserAvatar
{
    public int Id { get; set; }
    public int UserId { get; set; }
    public virtual User User { get; set; }
    public byte[] Avatar { get; set; }
}

该视图包括以下 html 的 'default' 头像和滑块

<div id="copiedimage"> 
    <img class="default-avatar" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='default-avatar' /> 
</div>
<div class="slider"> 
    <img class="avatar selected" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='avatar' /> 
    <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_dog.png")" alt='dog' /> 
    <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_chihuahua.png")" alt='chihuahua' />
    .... // more images 
</div>

设置分配所选头像的脚本是

$('.avatar').click(function () { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    var selectedAvatar = $('.avatar.selected')[0]; 
    var defaultAvatar = $('#copiedimage img')[0]; 
    defaultAvatar.src = selectedAvatar.src; 
    defaultAvatar.alt = selectedAvatar.alt; 
});

如何将此图像传递给 MVC 中的 Controller？如何将该图像保存到 SQL 数据库？

Answer 1

没有必要将图像的字节数组存储在数据库中，因为它已经作为文件存储在您的文件夹中（尽管您可以使用 File.ReadAllBytes(fileName); 方法）

而是将文件的路径存储在数据库中，您的模型现在将是

public class UserAvatar
{
    ....
    public string AvatarPath { get; set; }
}

在 GET 方法中，传递 UserAvatar 的实例，您可以将其设置为新项目的 'default' ("/Content/Images/Account/avatar.png")，或设置为编辑时的现有值。

然后在视图中，包含 AvatarPath 路径属性的隐藏输入，如果用户 select 从您的滑块

获取图像，该输入将被更新

<div id="copiedimage"> 
    <img class="default-avatar" src="@Model.AvatarPath" /> // bind to the model
</div>
@Html.HiddenFor(m => m.AvatarPath)

并将脚本修改为

$('.avatar').click(function () { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    var selectedAvatar = $('.avatar.selected')[0]; 
    var defaultAvatar = $('#copiedimage img')[0]; 
    defaultAvatar.src = selectedAvatar.src; 
    defaultAvatar.alt = selectedAvatar.alt;
    $('#AvatarPath').val(selectedAvatar.src); // set the value of the hidden input
});

当您提交表单时，说到

[HttpPost]
public ActionResult Create(UserAvatar model)

模型将与 selected 图像路径正确绑定（如果用户没有 select 图像，则为默认值）

如何在MVC中保存未上传到数据库的图像？

How to save image which is not uploaded to the database in MVC?

razor

ef-code-first

asp.net-mvc-5