从 blob 获取有效的二进制文件

Obtaining valid binary from blob

本文关键字:二进制文件 有效 获取 blob      更新时间:2023-09-26

我需要从文件输入中获取正确的二进制字符串(用于进一步操作)。我正在通过FileReader获取代码,但代码是错误的。在下一个代码中,我正在获取二进制字符串并尝试从中构建 blob:

function sendBlobToBrowser( blob )
{
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = 'audio.ogg';
    a.click();
    setTimeout(function() {
        window.URL.revokeObjectURL(url);
    }, 100)
}
function buildBlobFromString( binaryString )
{
    return new Blob( [ binaryString ], { type : 'audio/ogg' } );
}
$( '#fileInput' ).change( function()
{
    var file = this.files[ 0 ]
    var reader = new window.FileReader();
    reader.onloadend = function() {
        var binary = this.result;
        console.log( 'Converted string src: ' + binary )
        // trying to build blob
        var builtBlob = buildBlobFromString( binary );
        sendBlobToBrowser( builtBlob )
    }
    reader.readAsBinaryString( file );
})

下面是示例。对于测试,我正在使用这个 ogg 文件,但它与音频 web api 无关,它只是一些示例文件。

我已经厌倦了与它战斗:(真的谢谢。

  1. readAsBinaryString已弃用,请不要使用它
  2. 你从readAsBinaryString得到的字符串不是"二进制"的,它只是文本,二进制部分是字符串的创建方式(每个字节被读入一个字符)。如果希望结果是二进制的,请使用 readAsArrrayBuffer
  3. 可以使用文件创建对象 URL(blob 的文件实例 === true)
function sendBlobToBrowser( blob )
{
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = 'audio.ogg';
    a.click();
    setTimeout(function() {
        window.URL.revokeObjectURL(url);
    }, 100);
}
$( '#fileInput' ).change( function()
{
    var file = this.files[ 0 ];
    sendBlobToBrowser( file );    
});