如何用视图模型加载和上传图像

本文关键字：图像 加载 何用 视图 模型 | 更新日期: 2023-09-27 18:04:08

我有一个表单，用户可以在我的视图模型中使用以下属性更改他的个人资料图片:

public HttpPostedFileBase Image { get; set; }

这对上传很有用，但是我怎么才能显示他的照片呢?

我必须创建这样的另一个属性吗?

public HttpPostedFileBase UploadedImage { get; set; }
public byte[] Image { get; set; }

它看起来是错误的，有一种方法来做到这与1属性?

谢谢

如何用视图模型加载和上传图像

用户类别

public class ApplicationUser : IdentityUser
{
    public string Email { get; set; }
    public byte[] Picture { get; set; }
}

查看图片:

[HttpGet]
[AllowAnonymous]
public ActionResult ViewImage(string id)
{
    ApplicationUser user = m_DAL.Find<ApplicationUser>(x => x.UserName == User.Identity.Name);
    byte[] buffer = user.Picture;
    return File(buffer, "image/jpg", string.Format("{0}.jpg", user.UserName));
}
剃刀:

<img src="/user/viewimage/aaa">

或者如果你想在ViewModel中使用

@Html.Raw("<img src='"data:image/jpeg;base64," + Convert.ToBase64String(Model.Picture) + "'" class='"img-thumbnail'" style='"width: 100px; height: 100px; margin-bottom: 20px;'" />")

解决方案取决于您如何保存图像。如果您将其序列化为byte[]，您可以执行以下操作来在视图中加载图像:

在控制器中创建一个函数:

public void GetImageThumbnailFromByteArray(Guid? profileId)
        {   
            Profile profile = // Get profile by profileId
            Byte[] image = profile.Image;
            new WebImage(image).Write();
        }

View:

  <img src="@Url.Action("GetImageThumbnailFromByteArray", "Profile", new { profileId = Model.ProfileId})" />

您通常会将图像保存到服务器上的一个目录(或者可能是数据库)，然后简单地提供一个可用于呈现图像的URL，而不是将字节数组发送到HTML。

你不想在viewmodel中使用HttpPostedFileBase来显示文件，这是HTTP请求的一部分的包装。这里已经很好地回答了你的问题:

在MVC 4中上传/显示图像

这里

或

在表单中上传图像并在MVC 4中显示

相关文章：