使用Angular序列化图像数据问题

本文关键字:数据 问题 图像 序列化 Angular 使用 | 更新日期: 2023-09-27 18:24:39

我有一个应用程序,允许用户选择一个图像,然后我使用ng img裁剪来允许他们裁剪图像。从中我得到了图像的数据,表示为:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgA...

这是使用ng-src指令设置为图像的,如下所示:

<img ng-src="{{product.Image}}" />

从那里,我将数据发送回我的ASP.NET Web API控制器,以将信息保存在数据库中。我的产品模型有一个图像字节[],它在数据库中表示为varbinary。这是我的型号:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string SerialNumber { get; set; }
    public string Notes { get; set; }
    public byte[] Image { get; set; }
    public int CategoryId { get; set; }
    public virtual Category Category { get; set; }
    public ApplicationUser User { get; set; }
}

因此,当我将信息发送回我的控制器时,以下是请求信息:

PUT http://localhost:20697/api/products/2 HTTP/1.1
Host: localhost:20697
Connection: keep-alive
Content-Length: 37272
Accept: application/json, text/plain, */*
Origin: http://localhost:20697
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:20697/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie:  (truncated for size)
{"Category":{"Id":5,"Name":"Graphics/Media","User":null},"Id":2,"Name":"Windows 8 x64 Professional","SerialNumber":"MN8M6","Notes":null,"Image":"data:image/png;base64,iVBORw0KGgo...(truncated for size)","CategoryId":4,"User":null}

问题是,如果我从如上所示的图像中发送真实数据,那么当产品到达控制器时,它总是为空。如果我将图像的数据发送更改为abcd这样的简单字符串,那么它就可以正常运行。所以我猜这是一个序列化问题。有人能告诉我哪里出了问题吗?

谢谢!

使用Angular序列化图像数据问题

图像数据是一个字符串。您必须将其作为字符串接收,并使用convert.FromBase64String()将其转换回字节