如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API

Posted 2023-02-27

【中文标题】如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API

【英文标题】：How to send FormData from javascript to ASP.NET Core 2.1 web API using fetch

【发布时间】：2019-04-01 14:44:17

【问题描述】：

我正在尝试创建一个表单，将 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; 

【问题讨论】：

会发生什么？您的 F12 浏览器开发工具是否在控制台或网络选项卡中显示任何内容？你的控制器会被击中吗？更多输入......

是的，抱歉我忘了说，请求返回400，响应是："":["输入无效。"]

两件事：您没有发布 Id 字段，这是必需的；你可以尝试使用PostArticle([FromForm] Article article)

我认为这里的答案可能会有所帮助：***.com/questions/46640024/…

@CamiloTerevinto 好的，我添加了 [FromForm] 并创建了根本没有 Id 的新模型，现在请求返回 200（ok）但实际上没有表单数据进入文章模型（标题=空，内容=空）

【参考方案1】：

现在工作！解决方案是在添加 [FromForm] 的同时不设置任何内容类型的标题，谢谢大家的贡献。

部分解决方案位于this thread

这些是变化：

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

【讨论】：

你应该发布最终编辑的代码，而不是仅仅指向另一个问题