使用HTML和Angular JS從/到數據庫存儲和檢索圖像

Question

我使用Web API，HTML和Angular JS構建了單頁應用程序，以在員工列表上實施CRUD操作。

我已經建立在Visual Studio中一個新的數據庫與命名Employee表包含以下與它們的數據類型一起屬性：

• ID（INT）
• 全名（爲nvarchar（50））
• JobPosition（nvarchar的（50））
• 訓（nvarchar的（100））
• 嗜好（nvarchar的（100））
• 家鄉（爲nvarchar（ 50））
• PersonalBlog（爲nvarchar（50））
• 圖片（VARBINARY（MAX））

根據我的研究，以存儲在數據庫中的圖像的最佳方法是使用VARBINARY（最大）類型。但是，我想不出我如何能實現我的項目下列功能：

1. 手動存儲圖像
2. （由於該數據庫將通過一些 記錄之前被填充）獲取這些圖像（可能使用角JS）和 HTML頁面
3. 從HTML表單

Answer 1

我會解釋的可用選擇的1存儲這些圖片上顯示它們來完成這件事。

• 步驟1：將圖像轉換爲BASE64 /串
• 步驟2：將其綁定到圖像
• 步驟3：後Employee對象到的WebAPI
• 步驟4：轉換的base64串在圖像to bytes

byte [] imageInBytes = Convert.FromBase64String（employyeView.Image）;

• 第5步：爲實體變量賦值，對於圖像字段賦值 imageInBytes。
• 步驟6：插入到DB

或者，如果您可以在角圖像轉換成二進制則可以跳過步驟4和5。

用於轉換圖像以BASE64可以使用https://github.com/ninjatronic/angular-base64。

請遵循使用這個庫的說明，你可以簡單地調用：

var imageBase64=$base64.encode(image);