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来存储图像。

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

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

1 个答案: