如何使用 Angular 2(typescript) 将数据和图像都传递到 "ASP.NET Core" Web API？

Question

我的代码只能将数据传递到网络 API 但我想在 相同的请求 中传递数据和图像，而不是在不同的请求中使用 angular 2 + typescript 并在 ASP.Net Core Web API.

我将数据传递给 API 的代码：

Angular代码：

   create(user) {
    return this.authHttp.post(this._baseUrl + 'user/', JSON.stringify(userData)).map((res: Response) => {
        return res;
    }).catch(this.configService.handleError);
}

API代码：

    [HttpPost]
    public IActionResult Create([FromBody]UserModel user)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        //save user
        _userRepository.Add(user);
        _userRepository.Commit();

        return new OkObjectResult(user.UserId);
    }

Answer 1

解决方案一：

最简单的方法是将图像作为 base64 string.

发送

只需创建一个简单的 JavaScript 函数来读取文件并将其转换为 base64 string。在发送文件之前执行此操作 - <input> 上的 onchange 事件可能会为您完成这项工作。

然后就可以直接存到DB中了（如果需要的话也可以在服务器上另存为文件）

存储为base64字符串的图像可以直接由浏览器发回并显示，无需额外操作，例如：

<img src="data:image/bmp;base64,[base64EncodedImageHere]" />

方案二：

前端：

如果您正在使用 HTML5 和文件上传控件，只需将表单编码设置为 multipart/form-data:

<form method="post" enctype="multipart/form-data">

后端：

您在模型中的属性类型应为 IFormFile，然后您可以将文件保存在服务器上：

IFormFile file;

using (var fileStream = File.Create( [file path here] ))
{
    await file.CopyToAsync(fileStream);
    await fileStream.FlushAsync();
}

Answer 2

只需像往常一样通过网络api设置您的模型并POST/PUT它。我假设您有一个 web-api 模型对象，它为结构化数据和图像提供属性。通常是 sql 服务器中的 varbinary(max)。

在下面的代码片段中，我使用 "newattachment" 对象执行您的要求，该对象实际上是一个 webapi-模型。

为了获得一个新的空附件对象，我首先对网络进行 GETapi- 用于存储图像的模型。在下一步中，我设置了这个模型的属性，包括图像数据本身（一个 base64 编码的）字符串。最后我 PUT/POST 将对象保存在数据库中） 客户端：Angular 2

         this.dataService.getRecord('MT_DOKUMENTATION', -1)
            .subscribe((data: any[]) => {
                if (data) {
                var newattachment: any = data;
                newattachment.dokumentation = this.attachmentdata.split("base64,")[1];
                this.dataService.saveRecord('MT_DOKUMENTATION', "id", newattachment)
                    .subscribe((data: any[]) => {
                        var newrec: any = data;
                        ...
                    },
                    error => {
                        console.log(error);
                    },
                    () => {
                        console.log('Image Save complete')
                    });
                });

服务器端（C#、Web API）：

        // PUT: api/MT_DOKUMENTATION/5
        [ResponseType(typeof(void))]
        public async Task<IHttpActionResult> PutMT_DOKUMENTATION(int id, MT_DOKUMENTATION mT_DOKUMENTATION)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Entry(mT_DOKUMENTATION).State = EntityState.Modified;

            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
               ...              
            }

            return Ok(mT_DOKUMENTATION);
        }

如何使用 Angular 2(typescript) 将数据和图像都传递到 "ASP.NET Core" Web API？

How to pass data and image both to "ASP.NET Core" Web API using Angular 2(typescript)?

typescript

asp.net-core

asp.net-core-webapi

angular