不能将带有多个对象的文件从React上载到.net Core 5

Question

我试图上传文件与多个对象，例如，我有一个学生谁想要上传多个扫描/下载的文件。所有东西都必须拖放，所以当用户拖放文件时，我在react应用程序中生成对象，并通过axois使用_header["Content-Type"] = "multipart/form-data">.

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

public class CourseFile{
public Guid StudentId{get;set;}
public string FileName{get;set;}
public boolean IsPdf{get;set;}
public IFormFile File{get;set;}
}

StudentController

[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只制作对象

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;
}

Answer 1

您的问题可能在这里:

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

key/name似乎对文件很挑剔。为了工作，我不得不将其更改为以下内容:

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();
}