Question

我正在尝试将文件和一些数据（对象列表）上载到ASP.net core 2.1 Web-api端点。

以下代码可以正确生成并发送预期的有效载荷：

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

如何接收发布到ASP.net核心2.1 Web-API端点的文件和数据

2 个答案: