通过 ajax 传递 Blob 以生成文件

Posted 2023-03-22

【中文标题】通过 ajax 传递 Blob 以生成文件

【英文标题】：Pass Blob through ajax to generate a file

【发布时间】：2013-10-01 16:08:58

【问题描述】：

我正在尝试捕获录音机 (https://github.com/cwilso/AudioRecorder) 并通过 Ajax 发送 blob 一个 php 文件，该文件将接收 blob 内容并创建文件（在本例中为波形文件）。

Ajax 调用：

audioRecorder.exportWAV(function(blob) 
      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      console.log(url);
      var filename = <?php echo $filename;?>;
      $.ajaxFileUpload(
        url :  "lib/vocal_render.php",
        secureuri      :false,
        dataType : blob.type,
        data: blob,
        success: function(data, status) 
          if(data.status != 'error')
            alert("boa!");
        
      );
    ); 

还有我的 php 文件（vocal_render.php）：

<?php 

if(!empty($_POST))
    $data = implode($_POST); //transforms the char array with the blob url to a string
    $fname = "11" . ".wav";

    $file = fopen("../ext/wav/testes/" .$fname, 'w');
    fwrite($file, $data);
    fclose($file);
?>

P.S：我是 Blob 和 ajax 的新手。 提前致谢。

【参考方案1】：

尝试将文件作为表单数据上传

audioRecorder.exportWAV(function(blob) 

      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      console.log(url);

      var filename = <?php echo $filename;?>;
      var data = new FormData();
      data.append('file', blob);

      $.ajax(
        url :  "lib/vocal_render.php",
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        success: function(data) 
          alert("boa!");
        ,    
        error: function() 
          alert("not so boa!");
        
      );
); 

.

<?php 

if(isset($_FILES['file']) and !$_FILES['file']['error'])
    $fname = "11" . ".wav";

    move_uploaded_file($_FILES['file']['tmp_name'], "../ext/wav/testes/" . $fname);

?>

【讨论】：

没有“FormData”也可以吗？这样就可以使用图像 MIME 类型发送它？

@BennyNeugebauer 您可以将其作为文件或 Blob 直接发送，但您需要在服务器上进行不同的处理。

我整天都在寻找解决方案，尝试了很多不同的方法，但这是第一个起作用的方法！谢谢！

【参考方案2】：

根据documentation，使用XMLHttpRequest.send()可以直接使用Blob对象。

var blob = new Blob(chunks,  'type' : 'audio/webm' );
var xhr = new XMLHttpRequest();
xhr.open('POST', '/speech', true);
xhr.onload = function(e) 
  console.log('Sent');
;
xhr.send(blob);

我试过了，效果很好。