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

Question

我正在使用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表单存储这些图像

Answer 1

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

• 步骤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);