Question

我从麦克风录制音频，我需要使用POST表单将其发送到服务器。

我能够记录并拥有blob对象，但我不知道如何发送我试图将blob转换为ArrayBuffer并使用值设置隐藏字段，但我不确定它是否是正确的方法。

这是获取blob的js代码，转换为ArrayBuffer并设置为隐藏字段：

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;

    jQuery('hidden_field').val(arrayBuffer);
};
fileReader.readAsArrayBuffer(blobObject);

之后，我只需使用提交按钮正常发送表格在服务器上，如果我对请求对象执行dd命令，这就是我得到的：

array:2 [▼
    "_token" => "8HcKsoGblW9lEPVY0JYrFDbDAajdb63xdSQC3r5E"
    "hidden_field" => "[object ArrayBuffer]"
]

我不知道它是否正确。
如果是正确的，我该如何处理？

已更新
我解决了将blob作为base64字符串发送到隐藏字段中的问题，使用以下代码：

var fileReader = new FileReader();
fileReader.onload = function(event) {
     jQuery('#hidden').val(fileReader.result.substr(fileReader.result.indexOf(',')+1));
};
fileReader.readAsDataURL(s);

Answer 1

您可以将其读作dataURI并将hidden_field指定为base64字符串，然后在后端对其进行解码...

否则这是将blob附加到表单

的唯一方法

// only way to change input[type=file] value is with a other FileList instance
// and this is currently the only way to construct a new FileList
function createFileList(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError('expected argument to FileList is File or array of File objects')
  for (b = (new ClipboardEvent('')).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}

var file = new File([blobObject], 'filename.txt', {type: 'text/plain'})
var input = document.createElement('input')

input.type = 'file'
// input.multiple = true
input.files = createFileList(file)
input.name = 'hidden_field'
input.hidden = true

form.appendChild(input)

这不会在每个浏览器中都有效，因为它们都有约束，我知道firefox和blink肯定支持这个避风港测试其他浏览器

另一个解决方案是使用ajax + FormData

发出请求

var form = document.querySelector('form')

// get all other field in the form
var fd = new FormData(form)
// or start of with a empty form
var fd = new FormData()

// append the needed blob to the formdata
fd.append('hidden_field', blobObject, 'filename.txt')

fetch(form.action, {
  method: form.method,
  body: fd
}).then(function(res) {
  if (!res.ok) {
    console.log('something unexpected happened')
  }
  res.text().then(function(text) {
    // navigate to forms action page
    // location.href = form.action
  })
})

这有更多的跨浏览器支持

使用POST表单发送Blob对象

1 个答案: