将CSV文件从Angular7传递到MVC .Net Core

Question

我正在尝试将CS​​V文件传递到后端，以利用库来解析CSV数据。

我有一个带有C＃.Net Core MVC后端的Angular7前端，该后端利用打字稿中的HttpClient来往后端传递数据和对象。

我尝试了多种解决方案，但收效甚微（最接近的是我可以在代码中访问控制器，但文件从未传入）。

我试图避免对CSV进行任何形式的序列化或转换，直到它到达控制器为止，所以我想找到一种解决方案，可以将整个CSV发送到后端。

任何帮助，将不胜感激。

service.ts

// Parse CSV
// The CSV always reaches this part of the code and I can inspect it.
parseCsv$(file: File): Observable<Dto> {
    const request$ = this.http.post<Dto>(
        location.origin + '/api/csvimport',
        file,
        { headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data' }) }
    ).pipe(
        map((response: <Dto>) => response)
    );

    request$.subscribe();

    return request$;
}

CsvImportController.cs

    [HttpPost]
    [ProducesResponseType(typeof(Dto), 200)]

    // The 'file' variable below is always null
    public async Task<IActionResult> ParseCsv([FromBody]IFormFile file)
    {
        // do work here

Answer 1

您不应在“文件上载”中使用FromBody参数。

您应该使用request.Form.Files集合来获取上载的文件，或者

您可以在控制器操作中使用IList，如下所示。

API下方获取文件列表，然后将文件保存在服务器上的temp文件夹中。

[HttpPost("UploadFiles")]
public async Task<IActionResult> Post(List<IFormFile> files)
{
    long size = files.Sum(f => f.Length);

    // full path to file in temp location
    var filePath = Path.GetTempFileName();

    foreach (var formFile in files)
    {
        if (formFile.Length > 0)
        {
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await formFile.CopyToAsync(stream);
            }
        }
    }

    // process uploaded files
    // Don't rely on or trust the FileName property without validation.

    return Ok(new { count = files.Count, size, filePath});
}

希望这可以帮助。

Answer 2

所以我能够弄清楚

我需要将File更改为FileList ，然后使用FormData附加文件。 我还需要删除内容标头，因为让后端句柄键入内容本身可以防止引发错误。 在我的控制器中，我必须使用IEnumerable<IFormFile>才能完全正常工作。

我不完全了解为什么仅上传一个文件时必须使用FileList ，但这是发送文件所必需的。 如果我发现更多信息，将更新我的答案。

编辑：在MDN文档中针对以上内容，它指出“所有<input>元素节点都具有FileList类型的files属性，该属性允许访问此列表中的项目” （ https://developer.mozilla.org / en-US / docs / Web / API / FileList ）因此，要访问一个文件，您实际上需要访问FileList数组的第一个索引（ FileList[0] ）。 我可能对此有误解，请随时发表评论。

service.ts

parseCsv$(files: FileList): Observable<Dto> {
    const formData = new FormData();
    Array.from(files).forEach(
        (file: File) => formData.append(file.name, file)
    );

    return this.http.post<Dto>(
        location.origin + '/api/csvimport',
        formData)
    .pipe(
        map((response: <Dto>) => response)
    );
}

CsvImportController.cs

[HttpPost]
[ProducesResponseType(typeof(Dto), 200)]
public async Task<IActionResult> ParseCsv(IEnumerable<IFormFile> files)
{
    // Work here...