Как получить как файл, так и данные, помещенные в конечную точку Web-API ядра ASP.net 2.1

Question

Я пытаюсь загрузить файл и некоторые данные (список объектов) в конечную точку web-api ядра 2.1 для ASP.net.

Этот код ниже генерирует и правильно отправляет ожидаемую полезную нагрузку:

const formData = new FormData()
formData.append('file', this.file)
formData.append('data', JSON.stringify(this.mappings))

axios.post('upload', formData)
// {headers: {'content-type': 'multipart/form-data'}} optional ???

Полезная нагрузка выглядит следующим образом: (как видно из Chrome Dev-Tools, вкладка сети)

------WebKitFormBoundarydAP5tYG5GcFa4ivU
Content-Disposition: form-data; name="file"; filename="Master-List.xls"
Content-Type: application/vnd.ms-excel


------WebKitFormBoundarydAP5tYG5GcFa4ivU
Content-Disposition: form-data; name="data"

[{"required":true,"type":"field","value":"code","col":1,"text":"Item Code"},{"required":true,"type":"field","value":"name","col":2,"text":"Description"},{"required":true,"type":"field","value":"barcode","col":3,"text":"Barcode"},{"type":"field","value":"category","col":null,"text":"Category"},{"type":"field","value":"unit","col":null,"text":"Unit"},{"type":"location","value":1,"col":6,"text":"Store 1"}]
------WebKitFormBoundarydAP5tYG5GcFa4ivU--

Конечная точка Web-API выглядит следующим образом:

[HttpPost]
[Route("upload")]
//[Consumes("multipart/form-data")]
public Task<ActionResult> _upload([FromForm] Upload obj)
{
    // do something
    return Ok();
}

public class Upload
{
    public Field[] data { get; set; }
    public IFormFile file { get; set; }
}

public class Field
{
    public int col { get; set; }
    public string type { get; set; }
    public string value { get; set; }
}

Я могу получить file, но data всегда пуст.

Пожалуйста, что мне не хватает?

Answer 1

Несмотря на то, что не существует готового решения для отправки данных JSON в конечную точку ASP.NET Core MVC, можно отформатировать данные как набор пар ключ-значение, которые будут проанализированы в ваш Fields[], как ожидалось. Это выглядит примерно так (имя = значение):

data[<index>][<key>] = value

Вот пример кода, который создает FormData с использованием явных ключей свойств:

for (let i = 0; i < this.mappings.length; i++) {
    formData.append(`data[${i}][col]`, this.mappings[i].col);
    formData.append(`data[${i}][type]`, this.mappings[i].type);
    formData.append(`data[${i}][value]`, this.mappings[i].value);
}

Это создает нечто, похожее на это:

data[0][col] = value
data[0][type] = value
data[0][value] = value

Вот расширенный пример кода, который перебирает свойства, а не использует явные ключи:

for (let i = 0; i < this.mappings.length; i++) {
    for (let k in this.mappings[i]) {
        formData.append(`data[${i}][${k}]`, this.mappings[i][k]);
    }
}

В последнем примере предполагается, что вы хотите все итерируемые свойства каждого отображения - в JavaScript существует несколько различных способов сделать это, которые я здесь не буду перечислять. Если ваше отображение - простой объект, предоставленный мною код должен быть достаточным.

В целом, это более многословно как в коде, так и в количестве частей , отправляемых конечной точке ASP.NET Core MVC. Преимущество заключается в том, что конечная точка может просто получить строго типизированную модель без необходимости дополнительного анализа JSON и т. Д.

Answer 2

Не идеально, но эта модификация работает

  public class Upload
  {
    public string data { get; set; }
    public IFormFile file { get; set; }
  }

[HttpPost]
[Route("upload")]
[Consumes("multipart/form-data")]
public async Task<ActionResult> _upload([FromForm] Upload o)
{
  List<Field> x = JsonConvert.DeserializeObject<List<Field>>(o.data);

  return Ok();
}