如何在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的{​​{1}}。页面加载时的默认图像来自div，但如果用户点击滑块上的图像，或者如果他选择自己的图片（马）并点击它，则会更改此图像。

我有Url.Content型号：

UserAvatar

该视图包含以下用于“默认”头像和滑块

的html

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

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

<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; }); 中的Controller？如何将该图像保存到SQL数据库？

Answer 1

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

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

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

在GET方法中，UserAvatar的传递和实例，您可以设置为＆＃39;默认＆＃39; （＆＃34; /Content/Images/Account/avatar.png"）用于新项目，如果是编辑，则为现有值。

然后在视图中，为AvatarPath路径属性添加隐藏输入，如果用户从滑块中选择图像，则会更新

<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)

模型将与所选图像路径正确绑定（如果用户未选择图像，则为默认值）