Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

122
Views
No se pueden cargar archivos de React a .net Core 5 con múltiples objetos

Estoy tratando de cargar un archivo con varios objetos, por ejemplo, tengo un estudiante que quiere cargar varios archivos escaneados/descargados. Todo debe arrastrar y soltar, por lo que cuando el usuario arrastra y suelta archivos, genero objetos en la aplicación de reacción y los publico a través de axois con _header["Content-Type"] = "multipart/form-data" .

Pero no puedo ver el archivo en el objeto enviado. ¿Qué me estoy perdiendo?

 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 Solo creación de objeto

 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; }
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Su problema podría estar aquí:

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

La clave/nombre parece ser bastante quisquillosa con los archivos. Terminé teniendo que cambiar esto a lo siguiente para que funcione:

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

Hice una versión simplificada de su código (ver más abajo) para hacer mis pruebas. Probé varias combinaciones, como que tenías [File][] , y [File] , y finalmente .File . El último fue el único que dio como resultado que el archivo se configurara correctamente.

*Editar: esto solo parece aplicarse a la clave IFormFile . Pude hacer [StudentId] o .StudentId , y cualquiera de los dos funcionaría.

buscar código:

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

método del controlador:

 public class CourseFile { public int StudentId { get; set; } public IFormFile File { get; set; } } public async Task<IActionResult> UploadFiles([FromForm] IList<CourseFile> models) { return Ok(); }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!