使用POST表单发送Blob对象 [英] Send Blob object with POST Form

问题描述

我录制了来自麦克风的音频，我需要以POST形式将其发送到服务器.

I record an audio from microphone and I need to send it to server with a POST form.

我能够记录并具有blob对象，但是我不知道如何发送.
我试图将blob转换为ArrayBuffer并使用该值设置一个隐藏字段，但是我不确定这是否正确.

I am able to record and to have the blob object, but I do not know how to send.
I tried to transform the blob to ArrayBuffer and set an hidden field with the value, but I am not sure if it is the right way.

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

This is the js code to get the blob, transform to ArrayBuffer and set to the hidden field:

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

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

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

After that I simply send the form normally with a submit button.
On the server, If I do dd command to the request object, this is what I get:

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

我不知道它是否正确.
如果正确，我该如何处理?

I do not know if it is correct or not.
If it is correct, how can I handle it?

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

UPDATED
I solved sending the blob in an hidden field as a base64 string, with this code:

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

推荐答案

您可以将其读取为dataURI，并为based64字符串分配hidden_​​field，然后在后端对其进行解码...

You could read it as dataURI and assign hidden_field with base64 string and later decode it on the backend...

否则，这是将blob附加到表单的唯一方法

otherwise this is the only way to append a blob to a form

// 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和眨眼支持此功能，尚未测试其他浏览器

this will not work in every browser since all has constraints, i know for sure firefox and blink supports this haven't tested other browsers

另一种解决方案是使用ajax + FormData进行请求

the other solution is to make the request with 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
  })
})

这具有更多的跨浏览器支持

this has more cross browser support

这篇关于使用POST表单发送Blob对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！