如何從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中的數據庫檢索圖像？

回答

相關問題