Question

我的代码只能将数据传递给Web API，但我希望在相同的请求中使用angular 2 + typescript和ASP.Net Core Web API在不同的请求中传递数据和Image

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

Angular Code：

   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

解决方案1：

最简单的方法是将图像作为base64 string发送。

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

然后您可以将其直接存储在DB中（如果需要，可以将其另存为服务器上的文件）。

存储为base64字符串的图像可以通过浏览器直接发回和替换而无需其他操作，例如：

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

解决方案2：

前端：

如果您使用的是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

只需像以前一样通过webapi设置模型并POST / PUT即可。我假设你有一个web-api模型对象，为结构化数据和图像提供属性。通常是sql server中的varbinary（max）。

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

为了获得一个新的空附件对象，我首先针对用于存储图像的webapi-Model进行GET。在下一步中，我设置此模型的属性，包括图像数据本身（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);
        }

如何将数据和图像传递给＆＃34; ASP.NET Core＆＃34; Web API使用Angular 2（打字稿）？

2 个答案: