如何将 BLOB 添加到表单中？答案

【问题标题】：How to add BLOB to form?如何将 BLOB 添加到表单中？
【发布时间】：2020-12-01 07:20:47
【问题描述】：

我正在尝试使用 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;

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

【问题讨论】：

您可以将 Blob 编码为 Base64 并将 Base64 字符串发送到服务器

标签： javascript html asp.net asp.net-core razor-pages

【解决方案1】：

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

NewTermViewModel：

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

NewTerm.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");
        }

结果：

【讨论】：

【解决方案2】：

在表单上使用 formdata 事件来获取与表单相关的 FormData 实例。然后将您的 blob 附加到此实例。不要忘记将表单的 enctype 设置为“multipart/form-data” 这是一个例子：

const formElem = document.querySelector('form');
formElem.addEventListener('formdata', (e) => {
    e.formData.append("recordedSound", recordedSoundBlob, "sound.wav");
});

【讨论】：