Angular 11 不会将文件上传到 .NET 5答案

【问题标题】：Angular 11 won't upload file to .NET 5Angular 11 不会将文件上传到 .NET 5
【发布时间】：2021-07-17 23:33:25
【问题描述】：

我无法从上传到我的 .NET 5 服务的 Angular 11 应用程序中获取文件。如果我在控制器方法的第一行设置断点，它不会被命中。角度应用程序刚刚获得状态为 0 的 HttpErrorResponse。我能够 POST 而不会对同一控制器中的其他方法产生问题，所以我知道所有“设置”类型的东西都正常工作。

我正在 Angular 端进行上传：

postUploadLegacyData(files: File[]): Observable<string[]> {
    const formData = new FormData()
    files.forEach(x => formData.append('file', x, x.name))

    return this.http.post<string[]>('requests/import', formData)
}

然后在 .NET 端我有这个：

[Route("[controller]"), Produces("application/json"), Authorize, ApiController]
public class RequestsController : ControllerBase
{
    [HttpPost("import")]
    [Consumes("multipart/form-data")]
    public IActionResult PostImportExistingRequests(IEnumerable<IFormFile> files)

已解决

我发现它应该是在服务器端：

public async Task<IActionResult> PostImportExistingRequestsAsync()
{
    var form = await Request.ReadFormAsync();
    var files = form.Files;

【问题讨论】：

files.forEach(x => formData.append('file[]', x, x.name))你也可以试试这个吗？
Angular 代码看起来是正确的。我会查看网络选项卡，看看你是否确实在发送帖子，以防万一有一个 observable 没有被订阅到你的堆栈中的其他地方。
我怎么能看到。您正在等待接收文件列表而不是文件，使用当前代码在每次迭代时覆盖文件，最后您只发送一个文件而不是文件列表
@AshotAleqsanyan 现在正在调用服务器端，但是files 参数是一个空数组。
如果file 键名（您在服务器中等待）是正确的，我正在考虑的第二个问题可能是由于multipart/form-data 标头而导致的CORS 问题？

标签： angular .net-5 angular11

【解决方案1】：

Angular：为您的组件搭建一个前端文件夹 Angular ng g component upload --spec false

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { HttpEventType, HttpClient } from '@angular/common/http';

@Component({
  selector: 'file-upload-toAspCore',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  public progress: progressPercentage;  // you can yse this to display progress in HTML
  public message: string;
  
  @Output() public onUploadFinished = new EventEmitter();    
  constructor(private http: HttpClient) { }

  ngOnInit() {}

  public uploadFile = (files) => {
    if (files.length === 0) {
      return;
    }

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

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

接收文件的ASP Action

   [HttpPost, DisableRequestSizeLimit]
    public async Task<IActionResult> UploaderAction()
    {
        try
        {
            var formCollection = await Request.ReadFormAsync();
            var file = formCollection.Files.First();

【讨论】：