如何使用Angular 2（typescript）将数据和图像传递给“ASP.NET Core”Web API？

问题描述：

我有代码，可以将数据传递到只网络API，但我想通过使用角2 +打字稿和在ASP.Net核心网络API都在同一请求不是在不同的请求数据和图像。如何使用Angular 2（typescript）将数据和图像传递给“ASP.NET Core”Web API？

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

角代码：

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); 
    }

答

解决方案1：

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

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

然后你就可以在数据库直接存储（或作为文件保存在服务器上，如果你需要）。

图片存储为base64字符串可以发送回并通过浏览器直接displaed无需额外的动作，例如：

<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(); 
}

我使用控件。请指教如何将基础64绑定到？ –

使用Angular/JacaScript - 只需创建一个简单的函数来读取文件并将其转换为base64字符串。在发送文件之前执行此操作 - 在''上可能会发生'onchange'事件将为您完成这项工作：https://msdn.microsoft.com/en-us/library/ms536912(v=vs.85).aspx –

或者您可以使用其他方式：'

答

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

在下面我摘录做你所要求的与“newattachment”对象，这实际上是一个的WebAPI模型。

为了得到一个新的空依恋对象我首先做一个GET对用于存储图像的WebAPI的模型。在下一步中，我设置了该模型的属性，包括图像数据本身（base64编码）的字符串。最后，我把/ POST都保存在数据库中的对象） 客户端：角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＃，网页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？

相关推荐