Javascript-往返于数组的Blob将48添加到数组值

我有两个函数可在Blob和字节数组之间进行转换：

function arrayToBlob(data) {
    return new Blob(data);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

(blobToArray进行回调,因为它需要设置事件侦听器.)

我希望这些函数彼此相反,但是当我运行时

blobToArray(arrayToBlob([1,2,3]), console.log)

我得到的结果不是[1、2、3],而是[49、50、51].大概我正在做的是使数字转换为它们的ASCII值,但我不知道是哪一部分负责.

解决方法:

问题在于Blob的构造函数将数组中的数字转换为字符串.根据MDN文档,Blob的构造函数将Array或ArrayBuffer,ArrayBufferView,Blob,DOMString对象或任何此类对象的混合物作为第一个参数.所有这些都将被串联并放入Blob.因此,您传递的数组中的每个元素都是单独处理的.它们被转换为字符串(请参见ASCII表,“ 1”的代码为49,依此类推),然后放入Blob中.
请注意,这四个表达式的结果相同：

function arrayToBlob(data) {
    return new Blob(data);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

blobToArray(arrayToBlob([1,2,3]), console.log)
blobToArray(arrayToBlob(['1','2','3']), console.log)
blobToArray(arrayToBlob([123]), console.log)
blobToArray(arrayToBlob(['123']), console.log)

如果要取回二进制数组,则需要将适当的二进制数组传递给Blob：

function arrayToBlob(data) {
    return new Blob([data]);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

var arr = new Uint8Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;

blobToArray(arrayToBlob(arr), console.log)

注意如何将Uint8Array传递给Blob：return new Blob([data]);.我将其放入数组中,因此不会将其作为Blob作为第一个参数的对象本身对待.
总结：您并不是真正的往返,而是从一种类型的数组开始并将其转换为另一种类型的数组.如果您从一开始就使用propper数组,那么所有事情都会起作用.

标签：data-conversion,arrays,string,javascript
来源： https://codeday.me/bug/20191108/2006595.html