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

问题描述

我想上传图片（可绑定到一个数据类型字节[]的模型）从用户界面，并将其保存在数据库中。
我用它连接到.NET的WebAPI AngularJS并保存它MSSSQL服务器
我不能使用这些技术找到一个很好的例子。

I'm trying to upload an Image(can be bind to a model with a data type byte[]) from UI and save it in the database.I'm using AngularJS connecting it to .NET WebAPI and saving it to MSSSQL ServerI cant find a good example using these technologies.

问题：
哪种方法是更好地使用？像NG-上传，FORMDATA，ArrayBuffer，转换图像为字节等，以及你如何将赶上的WebAPI它？

Question:What approach is better to use? like ng-upload, FormData, ArrayBuffer, convert image to byte, etc. and how will you catch it from WebAPI?

谢谢！

推荐答案

我工作的这个特性，这些天。我分享我的经验（这显然可以改进）。
我使用的关键部件是：

I'm working on this feature these days. I share my experience (obviously it can be improved).The key components I use are:

• ：为（由道琼斯拿优秀作品）调整原始图像缩略图

• angular-file-upload
• .NET ImageResizer: for resizing original image for thumbnails (excellent work by Nathanael Jones)

堆栈：

Angular.js图片上传

正如我所说的，我用角文件上传。有没有这么多的加入到正式的文件，但我上传的配置是：

As I said, I use angular-file-uploader. There's no so much to add to the official documentation, but my uploader configuration is:

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

为了向用户ID发送到HTTP请求和授予访问权限授权的路线

In order to send the user id to the http request and to grant the access to the authorized route

的WebAPI 2动作

服务做的主要工作。这里是 code 。
正如你所看到的，在这个阶段，我做的图像时（一个用于用户的个人资料图片，另一个用于用户缩略图）两个resizings。除此之外，我转换的byte []字符串和prepare明年检索字符串。这样做我prePEND这部分数据：图像/ GIF; BASE64，因此，在未来的实体读数（通过的E​​ntityFramework）我没有了操纵的结果，我可以直接把他们的角模板

The service does the main work. Here is the code.As you can see, in this phase, I do two resizings of the image passed (one for the user profile picture and the other for user thumbnail picture). Besides this, I convert the byte[] in string and prepare the string for next retrievals. Doing this I prepend this part "data:image/gif;base64,", so, in the next entity readings (through EntityFramework) I don't have to manipulate the result anymore and I can put them directly in angular template:

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

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

Obviously It can be made differently, but that's my case.

数据库

目前，我只需使用nvarchar的存储图像。

At the moment I simply use nvarchar for storing images.

这是我第一次尝试，因此可以肯定地提高（如果有提示，不要犹豫）。

It's my first try so it can be improved for sure (if you have hints, don't hesitate).

这篇关于AngularJS的.Net的WebAPI上传图像并保存到数据库中（MSSQL）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！