[英]How to receive both File and data POSTed to an ASP.net core 2.1 Web-API endpoint
我正在嘗試將文件和一些數據(對象列表)上傳到 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
始終為空。
請問我錯過了什么?
盡管似乎沒有將 JSON 數據發送到 ASP.NET Core MVC 端點的開箱即用解決方案,但可以將數據格式化為一組將被解析為Fields[]
的鍵值對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 解析等。
不理想,但這種修改有效
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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.