AngularJS .Net WebAPI 上传图片并保存到数据库（MSSQL）

Question

我正在尝试从 UI 上传图像（可以绑定到数据类型为 byte[] 的模型）并将其保存在数据库中。 我正在使用 AngularJS 将其连接到 .NET WebAPI 并将其保存到 MSSSQL Server 我找不到使用这些技术的好例子。

问题： 什么方法更好用？比如 ng-upload、FormData、ArrayBuffer、图片转字节等，如何从 WebAPI 中获取？

谢谢！

Answer 1

这些天我正在开发这个功能。我分享我的经验（显然它可以改进）。 我使用的关键组件是：

• angular-file-upload
• .NET ImageResizer: 为缩略图调整原始图像的大小（Nathanael Jones 的优秀作品）

堆栈是：

Angular.js 图片上传器

正如我所说，我使用 angular-file-uploader。官方文档没有什么要补充的，但是my uploader configuration 是：

$scope.uploader = $fileUploader.create({
    scope: $scope,
    url: DisciturSettings.apiUrl + 'User/Image',
    queueLimit: 1,
    formData: [{ UserId: AuthService.user.userid }],
    headers: AuthService.getTokenHeader()
});

为了将用户ID发送到http请求并授予对授权路由的访问权限

WebApi 2 操作

该服务完成主要工作。这是code。 如您所见，在此阶段，我对传递的图像进行了两次调整大小（一个用于用户个人资料图片，另一个用于用户缩略图）。除此之外，我将 byte[] 转换为字符串并为下一次检索准备字符串。这样做我在这部分前面加上“data:image/gif;base64”，所以，在下一个实体读数中（通过 EntityFramework）我不必再操纵结果，我可以直接把它们放在角度模板中：

<img ng-src="{{local.user.image}}" />

显然它可以做得不同，但这是我的情况。

数据库

目前我只是使用 nvarchar 来存储图像。

这是我的第一次尝试，因此肯定可以改进（如果您有提示，请不要犹豫）。