如何将此 blob 字段发送到服务器？

Posted 2023-02-25

【中文标题】如何将此 blob 字段发送到服务器？

【英文标题】：How to send this blob field to the server?

【发布时间】：2014-08-14 16:44:27

【问题描述】：

我正在使用 matt diamond 的 audiojs 记录器库，它创建了一个引用/指向本地内存地址的 blob。这是在 html5 音频播放器中返回的，可以播放。它看起来像这样：blob:https%3A//www.voicebitz.com/cd83d7e9-dc49-4b1e-9b9a-c45260af5756

我的问题是如何使用这些信息并将其发送到服务器以使用 java 脚本将音频存储在服务器上？

我尝试按原样发​​送，但无法识别 blob。这就是我在没有运气的情况下尝试做的事情。

function test_convert()
  var blob = $("#playas_curr_0").find("audio").attr('src');
  console.log("the blob " +  blob + " " + blob.size + " " + blob.type); //returns the string "blob:https%3A//..." for blob and undefined for size and type
  var whatsthis = Object.prototype.toString(blob);    
  console.log(whatsthis);  //returns Object

  var arrayBuffer;
  var fileReader = new FileReader();
  
  fileReader.onload = function()
    var convertthis = fileReader.readAsArrayBuffer(blob);  //errors out is not recognized as a blob
    

注意：在我从评论者那里得到更多澄清后，问题发生了变化。 原文如下。 我意识到它是本地的，但我想获取该 blob，然后将其上传到服务器。我知道这里还有其他关于保存到服务器的问题/答案，甚至这个库也能做到，但我想把这个过程分开，这样它就不会一次性完成。

例如，我想要制作的流程是：在录音机上录制本地开始停止动作，我对我的录音很满意，所以我想保存它，我按下保存按钮，它会抓取这个“blob”并然后保存到服务器。

希望这个问题有意义并且有人可以提供帮助。

【问题讨论】：

看起来像一个网址。例如您的播放器获取指定地址 http://www.voicecity/... 的任何内容，从那里返回的内容可能是实际的音频数据。

是的，这是有道理的，所以它引用了一些本地存储地址。任何想法如何使用它？当我尝试通过prototype.toString 获取对象的类型时，它只给了我[object Object]，所以我真的不知道我能用它做什么。

【参考方案1】：

在我的项目中，我只是使用 ajax 在数据字段中发布 blob。

function uploadAudio(mp3Data)
    var reader = new FileReader();
    reader.onload = function(event)
        var fd = new FormData();
        var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
        console.log("mp3name = " + mp3Name);
        fd.append('fname', mp3Name);
        fd.append('data', event.target.result);
        $.ajax(
            type: 'POST',
            url: '/api/sessions/'+localStorage.sessionID+'/audio',
            data: fd,
            processData: false,
            contentType: false
        );
    ;      
    reader.readAsDataURL(mp3Data);

打电话：

uploadAudio(blob)

【讨论】：

我不确定您在 audiojs 库中所做的事情有什么不同，但无论如何这不起作用。我的主要挑战是弄清楚如何检索显然存储在数据 url 中该位置的“数据”。如果您能对此有所了解，那就太好了。感谢您的帮助。