在 POST 方法中，IFormFile 参数为空答案

【问题标题】：In POST method IFormFile parameter is null在 POST 方法中，IFormFile 参数为空
【发布时间】：2021-07-10 05:30:48
【问题描述】：

我正在尝试实现文件上传到服务器。我的 html 页面上有一个表单：

<form name="addForm" asp-action="PostMusic" enctype="multipart/form-data" method="post">
<label for="songName">Song name: </label>
<input type="text" name="songName" />
<label for="artistName">Artist name: </label>
<input type="text" name="artistName" />
<label for="albumName">Album name: </label>
<input type="text" name="albumName" />
<input type="file" name="soundFile" id="soundFile" value="Music file"/>
<input type="file" name="imageFile" id="imageFile" value="Image file"/>
<label for="videoLink">Video link (YouTube): </label>
<input type="url" name="videoLink" />
<label for="categories">Category: </label>
<select name="categories" id="categorySelect">
    <option value="all">All</option>
    <option value="autorSongs">Author Song</option>
    <option value="blues">Blues</option>
    <option value="jass">Jass</option>
    <option value="country">Country</option>
    <option value="classic">Classic</option>
    <option value="latinAmerican">Latin American</option>
    <option value="metal">Metal</option>
    <option value="pop">Pop</option>
    <option value="reggi">Reggi</option>
    <option value="rhytmNBlues">Rhytm-n-Blues</option>
    <option value="rock">Rock</option>
    <option value="rap">Rap</option>
    <option value="folk">Folk</option>
    <option value="hipHop">Hip-Hop</option>
    <option value="electroMusic">Electro</option>
</select>
<input type="button" name="addMusicBtn" value="Add"/>

我在其中发送数据的 .js 文件：

var soundFileName = $('#soundFile').get(0).files[0].name;
var soundFile = $('#soundFile').get(0).files[0];
var soundFormData = new FormData();
soundFormData.append(soundFileName, soundFile);
await fetch("../App/music/sound", { method: 'POST', body: soundFormData });

我的控制器中的 POST 方法：

[HttpPost("sound")]
public void PostMusic([FromForm(Name ="addForm")]IFormFile sound)
{
    string path = "../Musics";
    string fileName = Path.GetFileName(sound.FileName);
    using(FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
    {
        sound.CopyTo(stream);
    }
}

发送文件时，在JS文件中发送，但在PostMusic方法字段中IFormFile声音为空。提前感谢您的帮助。

【问题讨论】：

标签： javascript c# asp.net-web-api asp.net-core-webapi

【解决方案1】：

如果你想得到IFormFile sound，一种方法是只使用表单提交。

下面是一个演示。

查看：

<form name="addForm" asp-action="PostMusic" enctype="multipart/form-data" method="post">
<input type="file" name="soundFile" id="soundFile" value="Music file" />
 //...
<input type="submit" value="Add" />
</form>

行动：

[HttpPost]
public void PostMusic(IFormFile soundFile)
{
    //...
}

结果：

如果不想使用表单提交而使用fetch，可以如下操作。

查看：

<form name="addForm">
<input type="file" name="soundFile" id="soundFile" value="Music file" />
//...
<input type="button" id="test" value="click" />
</form>
@section Scripts
{
<script>

    $("#test").click(function(){
        var soundFile = $('#soundFile').get(0).files[0];
        var soundFormData = new FormData();
        soundFormData.append("soundFile", soundFile);
        fetch("/music/PostMusic",
            {
                method: "POST",
                body: soundFormData
            })
    });
</script>
 }

行动：

[HttpPost]
public void PostMusic(IFormFile soundFile)
{
    //...
}

测试结果：

【讨论】：