如何从MVC中的数据库检索图像？

我一直在研究一个系统，允许我们的用户上传图片到数据库中。上传图像到数据库似乎工作正常，但我似乎无法取回图像，并显示在我的看法。我没有收到任何错误消息，图片根本没有显示。这是我的代码到目前为止。如何从MVC中的数据库检索图像？

控制器 /创建方法

[HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(UserAccount userAccount, HttpPostedFileBase upload) 
    { 
     try 
     { 
      if (ModelState.IsValid) 
      { 
       if (upload != null && upload.ContentLength > 0) 
       { 
        var photo = new UserImage 
        { 
         FileName = System.IO.Path.GetFileName(upload.FileName), 
         FileType = FileType.VesselImage, 
         ContentType = upload.ContentType 
        }; 
        using (var reader = new System.IO.BinaryReader(upload.InputStream)) 
        { 
         photo.Content = reader.ReadBytes(upload.ContentLength); 
        } 
        userAccount.UserImages = new List<UserImage> { photo }; 
       } 
       db.UserAccounts.Add(userAccount); 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      }//if 
     }//try 
     catch (RetryLimitExceededException /* dex */) 
     { 
      //Log the error (uncomment dex variable name and add a line here to write a log. 
      ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists see your system administrator."); 
     } 
     return View(userAccount); 
    }

控制器 /详细方法 断点表明图像被发现，在这个阶段中选择。

public ActionResult Details(int? id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 
     UserAccount userAccount = db.UserAccounts 
      .Include(s => s.UserImages) 
      .SingleOrDefault(s => s.userId == id); 
     if (userAccount == null) 
     { 
      return HttpNotFound(); 
     } 
     return View(userAccount); 
    }

查看 /详细

@model Multiple_Table_Post.Models.UserAccount 
@{ 
    ViewBag.Title = "Details"; 
} 

<h2>Details</h2> 
<div> 
<h4>UserAccount</h4> 
<hr /> 
<dl class="dl-horizontal"> 
    <dt> 
     @Html.DisplayNameFor(model => model.userName) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.userName) 
    </dd> 

    <dt> 
     @Html.DisplayNameFor(model => model.userLocation) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.userLocation) 
    </dd> 


    @if (Model.UserImages.Any(f => f.FileType == FileType.VesselImage)) 
    { 
     <dt> 
      Image 
     </dt> 
     <dd> 
      <img src="~/[email protected](f => f.FileType == FileType.VesselImage).FileId" alt="avatar" /> 
     </dd> 
    } 

</dl> 
</div> 
<p> 
@Html.ActionLink("Edit", "Edit", new { id = Model.userId }) | 
@Html.ActionLink("Back to List", "Index") 
</p>

我觉得这事不对我的条件：

@if (Model.UserImages.Any(f => f.FileType == FileType.VesselImage)) 
    { 
     <dt> 
      Image 
     </dt> 
     <dd> 
      <img src="~/[email protected](f => f.FileType == FileType.VesselImage).FileId" alt="avatar" /> 
     </dd> 
    }

如果我在视图中这一点上打破我可以看到，该图像被选中，但是注释被输出。我什么都不返回。

我也包含了我的模型，希望能够深入了解这个问题的底部。在这里，他们是：

型号/UserAccount

namespace Multiple_Table_Post.Models 
{ 
using System; 
using System.Collections.Generic; 

public partial class UserAccount 
{   

    public int userId { get; set; } 
    public string userName { get; set; } 
    public string userLocation { get; set; } 


    public virtual ICollection<UserImage> UserImages { get; set; } 
} 
}

型号/UserImage 命名Multiple_Table_Post.Models使用系统 { ; using System.Collections.Generic;

public partial class UserImage 
{ 
    public int FileId { get; set; } 
    public string FileName { get; set; } 
    public string ContentType { get; set; } 
    public byte[] Content { get; set; } 
    public Nullable<int> PersonId { get; set; } 
    public FileType FileType { get; set; } 

    public virtual UserAccount UserAccount { get; set; } 
} 
}

型号 /文件类型

namespace Multiple_Table_Post.Models 
{ 
public enum FileType 
{ 
    VesselImage = 1, Photo 
} 
}

感谢，如果我错过了任何可能使这更容易，请让我知道。

更新：在这里，我已经包含了有关系统在命中条件并且可以看到数据时正在执行的操作的断点信息。

来源

2016-10-04 Yanayaya

我通常使用' jbutler483

你可以在这个'〜/ File？id = ...'调用后面显示代码吗？也许这个方法返回不正确的'Content-Type'头部？ –

尝试这种情况：

<img src="data:image/jpg;base64,[byte array]"/>

替换：

jpg与图像的类型即FileType
[byte array]与您的字节数组即Content。

如果还没有，则需要将Content转换为base64。

来源

2016-10-04 13:43:18

好吧，我一直在玩一些，并注意到我发布的更新中的一些东西。在下面的图片：你会发现，文件类型被列为0，但在文件类型类我已经告诉它的文件类型为1

public enum FileType 
{ 
    VesselImage = 1, Photo 
}

所以条件不满足，因为它无法看到等于0的FileType。在我的FileType类中将VesselImage更改为0可解决此问题。 :)

来源

2016-10-04 15:32:58 Yanayaya

我更喜欢这样做的方式是创建一个ActionResult，它直接为浏览器请求图像。这种方法的优点之一是，如果页面不止一次包含图像，浏览器将自动共享资源。这节省了数据库命中，数据传输并最大化缓存机会。

public ActionResult Portrait(int id) 
{ 
    vPhotos p = sdb.vPhotos.Where(e => e.ID == id).SingleOrDefault(); 
    byte[] photoArray = new byte[] { }; 
    return File(smallPhotoArray, "image/png"); 
}

现在，在你看来，只需调用ActionMethod作为IMG SRC参考：

<img src="@Url.Action("Portrait", "MyController" , new { id = id })" />

来源

2016-10-05 05:31:52 Khyron

如何从MVC中的数据库检索图像？

回答

相关问题