使用HTML和Angular JS从/向数据库存储和检索图像

时间:2017-10-11 01:50:20

标签: javascript html sql database asp.net-web-api

我正在使用Web API,HTML和Angular JS构建单页应用程序,以在员工列表上实现CRUD操作。

我在Visual Studio中创建了一个新数据库,其中一个名为Employee的表包含以下属性及其数据类型:

  • ID(int)
  • FullName(nvarchar(50))
  • JobPosition(nvarchar(50))
  • 座右铭(nvarchar(100))
  • 爱好(nvarchar(100))
  • 家乡(nvarchar(50))
  • PersonalBlog(nvarchar(50))
  • 图像(varbinary(MAX))

根据我的研究,在数据库中存储图像的最佳方法是使用varbinary(max)类型。但是,我无法弄清楚如何在我的项目中实现以下功能:

  1. 手动存储图像(因为数据库将填充多个 之前的记录)
  2. 检索这些图像(可能使用Angular JS)并将其显示在 HTML页面
  3. 从HTML表单存储这些图像

1 个答案:

答案 0 :(得分:0)

我将解释一下可以做到的选择。

  • 步骤1:将图像转换为base64 / string
  • 第2步:将其绑定到图像
  • 步骤3:将Employee对象发布到WebApi
  • 步骤4:将Image中的base64字符串转换为字节

byte [] imageInBytes = Convert.FromBase64String(employyeView.Image);

  • 步骤5:为实体变量赋值,用于图像字段分配 imageInBytes。
  • 第6步:插入数据库

或者如果你可以在Angular中将图像转换为二进制,那么你可以跳过第4步和第5步。

要将图片转换为base64,您可以使用https://github.com/ninjatronic/angular-base64

请按照使用此库的说明进行操作,您只需致电:

var imageBase64=$base64.encode(image);