如何在HTML5中使用Blob對象

這篇文章將為大家詳細講解有關如何在HTML5中使用Blob對象，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

Blob對象

一直以來，JS都沒有比較好的可以直接處理二進制的方法。而Blob的存在，允許我們可以通過JS直接操作二進制數據。

一個Blob對象就是一個包含有只讀原始數據的類文件對象。Blob對象中的數據并不一定得是JavaScript中的原生形式。File接口基于Blob，繼承了Blob的功能,并且擴展支持了用戶計算機上的本地文件。

Blob對象可以看做是存放二進制數據的容器，此外還可以通過Blob設置二進制數據的MIME類型。

創建Blob

通過構造函數

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray：數組，包含了要添加到Blob對象中的數據，數據可以是任意多個ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對象。

opt：對象，用于設置Blob對象的屬性（如：MIME類型）

1、創建一個裝填DOMString對象的Blob對象

2、創建一個裝填ArrayBuffer對象的Blob對象

3、創建一個裝填ArrayBufferView對象的Blob對象（ArrayBufferView可基于ArrayBuffer創建，返回值是一個類數組。如下：創建一個8字節的ArrayBuffer，在其上創建一個每個數組元素為2字節的“視圖”）

通過Blob.slice()

此方法返回一個新的Blob對象，包含了原Blob對象中指定范圍內的數據

Blob.slice(start:number, end:number, contentType:string)

start：開始索引，默認為0
end：截取結束索引（不包括end）
contentType：新Blob的MIME類型，默認為空字符串

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});

應用場景

前面提到，File接口基于Blob，繼承了Blob的功能并進行了擴展，故我們可以像使用Blob一樣使用File對象。

分片上傳

通過Blob.slice方法，可以將大文件分片，輪循向后臺提交各文件片段，即可實現文件的分片上傳。
分片上傳邏輯如下：

• 獲取要上傳文件的File對象，根據chunk（每片大小）對文件進行分片

• 通過post方法輪循上傳每片文件，其中url中拼接querystring用于描述當前上傳的文件信息；post body中存放本次要上傳的二進制數據片段

• 接口每次返回offset，用于執行下次上傳

下面是分片上傳的簡單實現：

initUpload();

//初始化上傳
function initUpload() {
    var chunk = 100 * 1024;   //每片大小
    var input = document.getElementById("file");    //input file
    input.onchange = function (e) {
        var file = this.files[0];
        var query = {};
        var chunks = [];
        if (!!file) {
            var start = 0;
            //文件分片
            for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
                var end = start + chunk;
                chunks[i] = file.slice(start , end);
                start = end;
            }
            
            // 采用post方法上傳文件
            // url query上拼接以下參數，用于記錄上傳偏移
            // post body中存放本次要上傳的二進制數據
            query = {
                fileSize: file.size,
                dataSize: chunk,
                nextOffset: 0
            }

            upload(chunks, query, successPerUpload);
        }
    }
}

// 執行上傳
function upload(chunks, query, cb) {
    var queryStr = Object.getOwnPropertyNames(query).map(key => {
        return key + "=" + query[key];
    }).join("&");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload?" + queryStr);
    xhr.overrideMimeType("application/octet-stream");
    
    //獲取post body中二進制數據
    var index = Math.floor(query.nextOffset / query.dataSize);
    getFileBinary(chunks[index], function (binary) {
        if (xhr.sendAsBinary) {
            xhr.sendAsBinary(binary);
        } else {
            xhr.send(binary);
        }

    });

    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var resp = JSON.parse(xhr.responseText);
                // 接口返回nextoffset
                // resp = {
                //     isFinish:false,
                //     offset:100*1024
                // }
                if (typeof cb === "function") {
                    cb.call(this, resp, chunks, query)
                }
            }
        }
    }
}

// 每片上傳成功后執行
function successPerUpload(resp, chunks, query) {
    if (resp.isFinish === true) {
        alert("上傳成功");
    } else {
        //未上傳完畢
        query.offset = resp.offset;
        upload(chunks, query, successPerUpload);
    }
}

// 獲取文件二進制數據
function getFileBinary(file, cb) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        if (typeof cb === "function") {
            cb.call(this, this.result);
        }
    }
}

以上是文件分片上傳前端的簡單實現，當然，此功能還可以更加完善，如后臺需要對合并后的文件大小進行校驗；或者前端加密文件，全部上傳完畢后后端解密校驗等，此處不做贅述。

通過url下載文件

window.URL對象可以為Blob對象生成一個網絡地址，結合a標簽的download屬性，可以實現點擊url下載文件
實現如下：

createDownload("download.txt","download file");

function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.innerHTML = fileName;
    link.download = fileName;
    link.href = URL.createObjectURL(blob);
    document.getElementsByTagName("body")[0].appendChild(link);
}

執行后頁面上會生成此Blob對象的地址，點擊后可下載：

查看下載結果：

通過url顯示圖片

我們知道，img的src屬性及background的url屬性，都可以通過接收圖片的網絡地址或base64來顯示圖片，同樣的，我們也可以把圖片轉化為Blob對象，生成URL（URL.createObjectURL(blob)），來顯示圖片。

關于如何在HTML5中使用Blob對象就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。