如何解决如何添加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");
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。