javascript - 如何将 BLOB 添加到表单中？

Question

我正在尝试使用 MediaRecorder 录制音频文件，然后将录制的音频上传到服务器的磁盘。到目前为止，录制没有问题，我有可用的 BLOB。我要做的就是将文件附加到表单中，以便在单击提交按钮时可以在控制器中访问它。

我的 JavaScript 函数如下所示：

function sendData(data) {
var fd = new FormData(document.forms["form1"]);
fd.append("AudioFile", data, URL.createObjectURL(data));

不幸的是，它在我的控制器中不可用：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> NewTerm(NewTermViewModel model)
    {
        var files = HttpContext.Request.Form.Files;

我必须做什么才能访问控制器中的文件？

标签： javascripthtmlasp.netasp.net-corerazor-pages

Answer 1

这是一个关于传递 Blob 文件的链接。这是一个关于使用 formdata 传递 xxx.wav 文件的演示（您需要processData: false,contentType: false在 ajax 中使用）：

新术语视图模型：

public class NewTermViewModel
    {
        public string Name { get; set; }
        public IList<IFormFile> AudioFile { get; set; }
    }

新术语.cshtml：

<h1>NewTerm</h1>
<form id="myform">
    @Html.AntiForgeryToken()
    Name:<input asp-for="Name" />
</form>

<input type="file" id="soundFile">
<button onclick="sendData()">sendData</button>
@section scripts{ 
<script type="text/javascript">
    function sendData() {
        var files = $("#soundFile").get(0).files;
        var form = document.forms["myform"];
        var fd = new FormData(form);
        fd.append('AudioFile', files[0]);
        $.ajax({
            type: 'POST',
            url: 'GetAudio',
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            data: fd,
            processData: false,
            contentType: false
        }).done(function (data) {
            console.log(data);
        });
    }
</script>
}

控制器：

[HttpGet]
        public ActionResult NewTerm() {
            return View();
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> GetAudio(NewTermViewModel model)
        {
            //var files = HttpContext.Request.Form.Files;
            return Json("OK");
        }

结果：