Не удается загрузить файлы из React в .net Core 5 с несколькими объектами

#javascript #c# #reactjs #axios #.net-5

Вопрос:

Я пытаюсь загрузить файл с несколькими объектами, например, у меня есть студент, который хочет загрузить несколько отсканированных/загруженных файлов. Все должно перетаскиваться, поэтому, когда пользователь перетаскивает файлы, я создаю объекты в приложении react и публикую их через axois с _header[«Тип содержимого»] = «составные/данные формы».

Но я не могу увидеть файл в отправленном объекте. Что я упускаю?

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

Студенческий контролер

 [Route("upload-files")] [HttpPost] public async Tasklt;IActionResultgt; UploadFiles([FromForm] IListlt;CourseFilegt; 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  } }  

Реагируйте только на создание кода объекта

 private getFormData(data: any, form: FormData, idx = -1, baseKey = "") { if (Array.isArray(data))  data.forEach((item, idx) =gt; this.getFormData(item, form, idx));  Object.keys(data).forEach((key) =gt; {  if (!key) return;  let _key =  idx gt; -1  ? baseKey  ? key.indexOf("files") gt;= 0  ? `${baseKey}[][${key}]`  : `${baseKey}[${idx}][${key}][]`  : `${key}[${idx}]`  : key;  let itemData = data[key];  if (Array.isArray(itemData)) {  itemData.forEach((item, idx) =gt; this.getFormData(item, form, idx, key));  return form;  }  if (key.indexOf("files") gt;= 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 lt; 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 Tasklt;IActionResultgt; UploadFiles([FromForm] IListlt;CourseFilegt; models) {  return Ok(); }  

Комментарии:

1. Это сработало, как и ожидалось. Спасибо @David784