如何添加BLOB到表单？

问题描述

我正在尝试使用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文件的link。这是一个有关将xxx.wav文件与formdata传递的演示（您需要在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");
        }

结果：

,

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

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