c# - 无法将图像从 Angular 8 上传到 ASP.Netcore Web API

Question

我花了一整天的时间试图让它发挥作用，我查看了以下内容：

• https://www.talkingdotnet.com/upload-file-angular-5-asp-net-core-2-1-web-api/

• https://code-maze.com/upload-files-dot-net-core-angular/

还有很多我数不清的。

我想要的只是发送一个表格和一个图像。得到的错误是：

• 缺少内容类型边界

• 不正确的内容类型

• 函数评估需要所有线程运行

在角度

register(user: UserViewModel, logo: File) {
    // We use formData because we can't send file as an object
    const formData = new FormData();

    formData.append("user", JSON.stringify(user));

    formData.append("logo", logo);

    console.log(formData);

    return this.http.post<UserRegisterViewModel>(`${UserAPI.API_User}/${"register"}`, formData).pipe(map(user => {

      return user;

    }));
  }

比我的 c# 代码看起来像这样

[HttpPost, DisableRequestSizeLimit]
        [AllowAnonymous]
        [Route("register")]
        //[Consumes("application/json", "multipart/form-data")]
        public async Task<IActionResult> RegisterAsync()
        {

            IFormFile logo = null;

            try
            {

                // Get the logo
                logo = Request.Form.Files[0];
                // Get the user json string
                var userJson = Request.Form["user"];

标签： c#angularasp.net-core

Answer 1

如果你想从Request.Form. 您可以按照以下代码示例进行操作：

客户端 ：

const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);

this.http.post('https://localhost:5001/api/upload', formData, {reportProgress: true, observe: 'events'})
.subscribe(event => {
    if (event.type === HttpEventType.UploadProgress)
    this.progress = Math.round(100 * event.loaded / event.total);
    else if (event.type === HttpEventType.Response) {
    this.message = 'Upload success.';
    this.onUploadFinished.emit(event.body);
    }
});

服务器端 ：

[HttpPost, DisableRequestSizeLimit]
public IActionResult Upload()
{
    try
    {
        var file = Request.Form.Files[0];
        var folderName = Path.Combine("StaticFiles", "Images");
        var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);

       .....
    }
    catch (Exception ex)
    {
       ....
    }
}

或者您可以使用 FromForm 获取文件：

客户端 ：

let fileToUpload = <File>files[0];
const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);

this.http.post('YourURL', formData, {headers: {
  'Accept': 'application/json',     
  'Content-Disposition' : 'multipart/form-data'
},reportProgress: true, observe: 'events'})
  .subscribe(event => {
    ....
  });

然后服务器端将是：

[HttpPost, DisableRequestSizeLimit]
public IActionResult Upload([FromForm(Name = "file")] IFormFile file)
{


}