将图像从 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"];

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)

{

}

Answer 2

这解决了它，我有一个断点

logo = Request.Form.Files[0];

由于某种原因，VS2017 和 2019 中存在一个错误。