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

这个网站上的每个问题，我找到的每个教程都是关于使用

HttpPostedFileBase

在数据库中保存上传的图像。与此相反：

<input type='file'>

此

div

包含可能会更改的

img

。从图中可以更清楚地了解：

所以，这个左圆圈的化身实际上是来自这个

div

的

img

。页面加载时的默认图像来自

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

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

---

如何将此图像传递到

MVC

中的

Controller

？如何将该图像保存到SQL数据库？

在数据库中存储图像的字节数组没有意义，因为它已作为文件存储在文件夹中（尽管可以使用

file.ReadAllBytes（fileName）；

方法）

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

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

在GET方法中，传递并实例化

UserAvatar

，您可以将其设置为新项目的“默认值”（“/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)

当你提交表格时，说

[HttpPost]
public ActionResult Create(UserAvatar model)

---

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

为什么您有

byte[]Avatar

属性。似乎您只想回发所选图像的url（例如，Content/Images/Account/xxx.png`），当选择图像时，您可以将其存储在隐藏输入中。我想将此图像保存到数据库中，因此我了解到字节[]是保存图像的最佳方式……为什么？它已经保存在您的

Content/Images/Account

文件夹中。再次保存它是毫无意义的额外开销。你所需要做的就是保存路径/文件名。所以，我应该创建如下内容。。。如果用户选择已经存在于内容/图像/文件夹中的图像（从该滑块），我应该只保存路径/文件名，如果用户选择从其本地计算机上载的图像，我应该使用HttpPostedFileBase？是（如果用户上载了自己的图像，您应该将其保存到文件夹，并将路径/文件名存储在db中）

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