如何僅使用 javascript 將 blob url 轉換為字節數組

Question

我有 blob url，我需要將其轉換為字節 [] 以進行存儲。 我最初嘗試使用 FileReader 將其轉換為 base64

    var xhr = new XMLHttpRequest;
    xhr.responseType = 'blob';

    xhr.onload = function() {
        var recoveredBlob = xhr.response;
        var reader = new FileReader;

        reader.onload = function() {
            var blobAsDataUrl = reader.result;
            return blobAsDataUrl.toString().replace('data:image/png;base64,', '');
        };
        reader.readAsDataURL(recoveredBlob);
    };

    xhr.open('GET', blobUrl);
    xhr.send(); 

然后使用以下將其轉換為數組

var bData = atob(blob);
console.log('------ bData : ', bData);
const array = Uint8Array.from(bData, b => b.charCodeAt(0));

但我沒有得到預期的二進制輸出..

Answer 1

所以我設法實現了這一點，這可能不是合適的方式，但在這里張貼，好像其他人可能會覺得它有用。

所以我擁有的是一個 blob url，並且

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
    var recoveredBlob = xhr.response;
    const reader = new FileReader();
    // This fires after the blob has been read/loaded.
    reader.addEventListener('loadend', (e) => {
        blob =  new Uint8Array(e.target.result);
        // calling the save method
    });
    // Start reading the blob as text.
    reader.readAsArrayBuffer(recoveredBlob);
};
// get the blob through blob url 
xhr.open('GET', blobUrl_);
xhr.send();

此外，我必須對我的 jquery 服務調用進行修改，必須添加processData: false ，否則將處理傳遞的數組，在我的情況下，服務無法對其進行消毒。

$.ajax({
    type: 'PATCH',
    url: url_,
    contentType: 'application/octet-stream',   
    data: blob,
    processData: false,
    headers: {
        "If-Match": newEtag,
        "X-XSRF-TOKEN": xsrfSessionCookie,
    },
    success: function (res) {
        // do something 
    } 
});

干杯