快捷導(dǎo)航

JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解

更新時(shí)間：2023年08月06日 11:47:30 作者：風(fēng)如也

這篇文章主要為大家介紹了JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Blob

Blob對(duì)象表示一個(gè)不可變，原始數(shù)據(jù)的類文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取。

Blob表示的不一定是javascript原生格式的數(shù)據(jù)，File接口基于Blob，繼承了blob的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件

要從其他非blob對(duì)象和數(shù)據(jù)構(gòu)造一個(gè)Blob，請(qǐng)使用Blob()構(gòu)造函數(shù)。如果要?jiǎng)?chuàng)建blob的子集，可以使用slice方法。

構(gòu)造函數(shù)

Blob()構(gòu)造函數(shù)返回一個(gè)新的Blob對(duì)象，blob的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成

const aBlob = new Blob(array[, options])

構(gòu)造函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是數(shù)組，成員是字符串或二進(jìn)制對(duì)象等，表示新生成的Blob實(shí)例對(duì)象的內(nèi)容。第二個(gè)參數(shù)可選，表示配置對(duì)象，有兩個(gè)屬性，type，默認(rèn)值為空字符串，表示將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類型；endings，默認(rèn)值是"transpartent"，用于指定包含行結(jié)束符的字符串如何被寫入。

示例

const obj = { hello: 'world' }
const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })
console.log(blob);
// Blob {size: 17, type: 'application/json'}

實(shí)例屬性

Blob.size：只讀，Blob對(duì)象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）
Blob.type：只讀，一個(gè)字符串，表示該Blob對(duì)象所包含數(shù)據(jù)的MIME類型，如果類型未知，則該值為空字符串

實(shí)例方法

Blob.text()：返回一個(gè)Promise且包含blob所有內(nèi)容的UTF-8格式的USVString
Blob.arrayBuffer()：返回一個(gè)Promise且包含blob所有內(nèi)容的二進(jìn)制格式的ArrayBuffer
Blob.stream()：返回一個(gè)能讀取blob內(nèi)容的ReadableStream
Blob.slice([start[, end[, contentType]]])：返回一個(gè)新的Blob對(duì)象，包含了源Blob對(duì)象中指定范圍內(nèi)的數(shù)據(jù)
- start：可選，Blob里的起始下標(biāo)，如果為負(fù)數(shù)，從數(shù)據(jù)的末尾開始從后往前計(jì)算，默認(rèn)值0，如果start的長度大于源Blob的長度，返回一個(gè)長度為0并且不包含任何數(shù)據(jù)的Blob對(duì)象
- end：可選，Blob里的一個(gè)下標(biāo)，如果為負(fù)數(shù)，從數(shù)據(jù)的末尾開始從后往前計(jì)算，默認(rèn)值為源Blob的長度
- contentType：可選，給新的Blob賦予一個(gè)新的文檔類型 type，默認(rèn)值為空字符串

blob.slice(1, 3, 'application/json')
// Blob {size: 2, type: 'application/json'}
blob.slice(33, 3)
// Blob {size: 0, type: ''}

從Blob中提取數(shù)據(jù)

一種從Blob中讀取內(nèi)容的方法是使用FileReader

下載文件

相關(guān)知識(shí)點(diǎn)：

URL.createObjectURL()

URL.createObjectURL()會(huì)創(chuàng)建一個(gè)DOMString，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL，這個(gè)URL的生命周期和創(chuàng)建它的窗口中的document綁定。這個(gè)新的URL對(duì)象表示指定的File對(duì)象或Blob對(duì)象。返回值格式 blob:URL

在每次調(diào)用createObjectURL()方法時(shí)，都會(huì)創(chuàng)建一個(gè)新的URL對(duì)象，即使你已經(jīng)用相同的對(duì)象作為參數(shù)創(chuàng)建過。當(dāng)不需要這些URL對(duì)象時(shí)，每個(gè)對(duì)象必須調(diào)用URL.revokeObjectURL()方法來釋放。

URL.revokeObjectURL()

URL.revokeObjectURL()方法用來釋放一個(gè)之前已經(jīng)存在的，通過調(diào)用URL.createObjectURL()方法創(chuàng)建的URL對(duì)象。當(dāng)你結(jié)束使用某個(gè)URL對(duì)象之后，應(yīng)該通過調(diào)用這個(gè)方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。

function download(blob){
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    document.body.appendChild(link)
    link.download = file.name // download屬性指定文件名
    link.href = url // 為href屬性指定下載鏈接
    link.click() // 觸發(fā)link的click事件
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
}
// download方法傳入的參數(shù)可以是File對(duì)象也可以是Blob對(duì)象

讀取文件內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="input">
  <button onclick="getFile()">提交</button>
  <script>
    function getFile() {
      let fileDom = document.querySelector('#input')
      console.log(fileDom.files)
      const file = fileDom.files[0]
      const reader = new FileReader()
      reader.readAsText(file, 'UTF-8')
      reader.onload = function() {
        console.log(reader.result)
      }
    }
  </script>
</body>
</html>

FileReader

FileReader對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件的內(nèi)容，使用File或Blob對(duì)象指定要讀取的文件或內(nèi)容。

注意：FileReader僅用于以安全的方式從用戶（遠(yuǎn)程）系統(tǒng)讀取文件內(nèi)容，它不能用于從文件系統(tǒng)中按路徑名簡單的讀取文件。要在js中按路徑名讀取文件，應(yīng)使用標(biāo)準(zhǔn)Ajax解決方案進(jìn)行服務(wù)器端文件讀取。

構(gòu)造函數(shù)

使用FileReader()構(gòu)造器去創(chuàng)建一個(gè)新的FileReader

const reader = new FileReader()

實(shí)例屬性

FileReader.error：只讀，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤，一個(gè)DOMException
FileReader.readyState：只讀，表示FileReader狀態(tài)的數(shù)據(jù)
- 值為0，表示還沒加載任何數(shù)據(jù)，EMPTY
- 值為1，表示數(shù)據(jù)正在被加載，LOADING
- 值為2，表示已完成全部的讀取請(qǐng)求，DONE

reader = new FileReader()
console.log(reader.readyState) // 0
reader.readAsText(file, 'UTF-8')
console.log(reader.readyState) // 1
reader.onload = function() {
    console.log(reader.readyState) // 2
}

FileReader.result：只讀，文件的內(nèi)容，該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪種方法來啟動(dòng)讀取操作

實(shí)例方法

FileReader.abort()：中止讀取操作，在返回時(shí)，readyState屬性為DONE

FileReader對(duì)象提供了四個(gè)方法，處理Blob對(duì)象，Blob對(duì)象作為參數(shù)傳入這些方法，然后以指定的格式返回

FileReader.readAsText()：將Blob或File對(duì)象根據(jù)特殊的編碼格式轉(zhuǎn)換為字符串形式內(nèi)容，可以指定文本編碼，默認(rèn)UTF-8。常用來讀取文本文件
FileReader.readAsArrayBuffer()：將Blob或File對(duì)象讀取的文件數(shù)據(jù)轉(zhuǎn)換為一個(gè)ArrayBuffer對(duì)象
FileReader.readAsBinaryString()：將Blob或File對(duì)象讀取的文件數(shù)據(jù)轉(zhuǎn)換為文件原始二進(jìn)制格式，該特性是非標(biāo)準(zhǔn)的，盡量不要在生產(chǎn)環(huán)境使用
FileReader.readAsDataURL()：將Blob或File對(duì)象讀取的文件數(shù)據(jù)轉(zhuǎn)換為包含一個(gè)data:URL格式的字符串（Base64編碼）

事件處理

FileReader.onloadstart：處理loadstart事件，該事件在讀取操作開始時(shí)觸發(fā)
FileReader.onload：處理load事件，該事件在讀取操作完成時(shí)觸發(fā)
FileReader.onloadend：處理loadend事件，該事件在讀取操作結(jié)束時(shí)（要么成功，要么失?。┯|發(fā)
FileReader.onerror：處理error事件，該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)
FileReader.onabort：處理abort事件，該事件在讀取操作被中斷時(shí)觸發(fā)
FileReader.onprogress：處理progress事件，該事件在讀取Blob時(shí)觸發(fā)

reader = new FileReader()
reader.readAsText(file, 'UTF-8')
reader.onloadstart = function() {
    console.log("start");
}
reader.onprogress = function() {
    console.log("progress");
}
reader.onload = function() {
    console.log("load")
}
reader.onloadend = function() {
    console.log("end")
}
// start
// progress
// load
// end

以上就是JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS構(gòu)造函數(shù)Blob FileReader的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: