无法将文件从 React 上传到具有多个对象的 .net Core 5

Posted 2023-04-12

【中文标题】无法将文件从 React 上传到具有多个对象的 .net Core 5

【英文标题】：Cannot upload files from React to .net Core 5 with multiple objects

【发布时间】：2021-12-14 01:04:00

【问题描述】：

我正在尝试上传包含多个对象的文件，例如我有一个学生想要上传多个扫描/下载的文件。一切都必须拖放，所以当用户拖放文件时，我会在 react 应用程序中生成对象并通过带有 _header["Content-Type"] = "multipart/form-data" 的 axois 发布。 p>

但我无法在已发送对象中看到文件。我错过了什么？

public class CourseFile
    public Guid StudentIdget;set;
    public string FileNameget;set;
    public boolean IsPdfget;set;
    public IFormFile Fileget;set;

学生控制器

[Route("upload-files")]
[HttpPost]
public async Task<IActionResult> UploadFiles([FromForm] IList<CourseFile> models)

    var _req = Request;
    var files = Request.Form.Files; // I can see files here
    var file = files.First();
    var modelProperty = file.Name; // I can see model property here
    foreach (var courseFile in models)
    
         UploadFiles(courseFile.File) // Always null
    

React Code Only 对象的制作

private getFormData(data: any, form: FormData, idx = -1, baseKey = "") 
if (Array.isArray(data))
  data.forEach((item, idx) => this.getFormData(item, form, idx));
  Object.keys(data).forEach((key) => 
    if (!key) return;
    let _key =
      idx > -1
        ? baseKey
          ? key.indexOf("files") >= 0
            ? `$baseKey[][$key]`
            : `$baseKey[$idx][$key][]`
          : `$key[$idx]`
        : key;
      let itemData = data[key];
      if (Array.isArray(itemData)) 
        itemData.forEach((item, idx) => this.getFormData(item, form, idx, key));
        return form;
      
      if (key.indexOf("files") >= 0) 
        form.append(`$baseKey[$idx][File][]`, itemData);
       else if (itemData) 
        form.append(_key, itemData);
       else 
        form.append(_key, "");
      
    );
return form;

【参考方案1】：

你的问题可能在这里：

form.append(`$baseKey[$idx][File][]`, itemData);

密钥/名称似乎对文件非常挑剔。为了工作，我最终不得不将其更改为以下内容：

form.append(`$baseKey[$idx].File`, itemData);

我制作了您的代码的简化版本（见下文）来进行测试。我尝试了多种组合，比如你有[File][]，和[File]，最后是.File。最后一个是唯一导致文件被正确设置的。

*编辑：这似乎只适用于IFormFile 键。我可以做到[StudentId] 或.StudentId，其中任何一个都可以。

获取代码：

  const baseKey = 'models';
  const data = new FormData();
  for (let idx = 0; idx < 10; idx++) 
    const b = new Blob(['This is my blob content ' + idx],  type: 'text/plain' );
    data.append(`$baseKey[$idx].StudentId`, idx);
    data.append(`$baseKey[$idx].File`, b);
  
  fetch('/home/uploadfiles',  method: 'post', body: data );

控制器方法：

public class CourseFile

    public int StudentId  get; set; 
    public IFormFile File  get; set; 


public async Task<IActionResult> UploadFiles([FromForm] IList<CourseFile> models)

    return Ok();

【讨论】：

它确实按预期工作。谢谢@David784