javascript - 如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API
问题描述
我正在尝试创建一个表单,将 FormData 对象发送到 API 控制器,将数据序列化到 Article 类,但我无法让它工作。我已经尝试过评论的内容。
这是我的 HTML:
<form onsubmit="postArticle()">
<input type="type" name="Title" value="" />
<input type="type" name="Content" value="" />
<input type="submit" value="Submit" />
</form>
这是我的 JS:
<script>
var postArticle = () => {
event.preventDefault();
var Article = new FormData(this.event.target);
console.log([...Article]);
fetch('/api/Articles', {
headers: {
'Content-Type': 'multipart/formdata',
//'Content-Type': 'application/json'
},
method: "POST",
body: Article
//body: JSON.stringify(Article)
})
}
</script>
控制器:
// POST: api/Articles
[HttpPost]
public async Task<IActionResult> PostArticle(Article article)
{
string name = article.Title;
if (!ModelState.IsValid)
{
return Ok();
}
_context.Article.Add(article);
await _context.SaveChangesAsync();
return Ok();
}
和我的文章类:
public class Article
{
public int Id { get; set; }
public string Title { get; set; }
public string Content { get; set; }
}
解决方案
现在工作!解决方案是在添加 [FromForm] 的同时不设置任何内容类型标题,谢谢大家的贡献。
解决方案的一部分是在这个线程
这些是变化:
var postArticle = () => {
event.preventDefault();
var Article = new FormData(this.event.target);
console.log([...Article]);
fetch('/api/Articles', {
method: "POST",
body: Article
})
}
// POST: api/Articles
[HttpPost]
public async Task<IActionResult> PostArticle([FromForm]Article article)
{
string name = article.Title;
if (!ModelState.IsValid)
{
return Ok();
}
//_context.Article.Add(article);
//await _context.SaveChangesAsync();
return Ok(); //CreatedAtAction("GetArticle", new { id = article.Id }, article);
}
推荐阅读
- visual-studio-code - Fira代码字体卡在vscode的粗体上,如何解决?
- javascript - Typescript 生成带有 `#private;` 字段的声明 d.ts 文件
- c++ - 将范数定义为C++中向量类的成员函数
- python - Python 请求。模拟 cookie
- c++ - 在 C++ 中返回指针的函数
- c - AudioObjectPropertyAddress 对象的 mElement 选项是什么?
- vba - 如何在 Outlook 窗体中使用按钮启动宏?
- julia - 制作宏以将函数标记为已弃用
- python - 你如何让代码检查被跟踪对象在哪个部分?
- python - Discord Bot 离开服务器