Blob ：（Binary Large Object）二進(jìn)制大對象

Bold是一個專門支持文件的二進(jìn)制對象，用來支持文件操作

Blob構(gòu)造函數(shù)接受兩個參數(shù)，

• 參數(shù)一： 字符串或二進(jìn)制對象
• 參數(shù)二： 一個配置項(xiàng) 對象 {}

參數(shù)二目前只有一個type屬性， 值是字符串， 標(biāo)識數(shù)據(jù)的MIME類型，（默認(rèn)值是空字符串）
列： new Blob([ 'b' ]) // => {size: 2, type: ""}

size： 字節(jié)數(shù)（大?。?br> type： 類型。（會在下文詳細(xì)解說）

創(chuàng)建一個Blob，查看其原型提供的方法

blob.png

其中：

arrayBuffer: 讀和寫,用來表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)，你不能直接操作 ArrayBuffer 的內(nèi)容，而是要通過類型數(shù)組對象或DataView 對象來操作，它們會將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容。
slice: 切割blob對象，（可實(shí)現(xiàn)分片上傳等）slice(start, end)
text: 會返回一個（期約）promise對象，包含了blob的內(nèi)容，使用UTF-8的編碼來解析
stream:
在MDN有詳細(xì)的解說 / 點(diǎn)擊跳轉(zhuǎn)

文件流下載

AJAX 請求時，如果指定responseType屬性為blob，下載下來的就是一個 Blob 對象。
列：

function getAxiosBlob() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

我們可以通過window.URL.createObjectURL，接收一個Blob（File）對象，將其轉(zhuǎn)化為Blob URL,方便某些API使用，這些URL以blob:開頭，標(biāo)識這是一個blob文件

bloba.png

實(shí)際使用中：會配合a標(biāo)簽的download屬性配合下載

axios.get(imageUrl, {
    headers: {
      'Authorization': token,
    },
    responseType: 'blob', // axios 添加blob type
  })
.then((respone) => {
          let resData = response.data
          // new Blob() 對返回的文件流類型處理
          const blob = window.URL.createObjectURL(new Blob([resData], { type: 'application/ms-excel'}));
          //   生成一個a元素
          let a = document.createElement('a')
          // 創(chuàng)建一個單擊事件
          let event = new MouseEvent('click')
          // 圖片名稱
          a.download = '訂單數(shù)據(jù)報表' + new Date().getTime() + '.xlsx' // 默認(rèn)的名稱
          // 將生成的URL設(shè)置為a.href屬性
          a.href = blob
          a.dispatchEvent(event)
})

img 顯示blob圖片

window.URL.createObjectURL，的URL還可以賦值給img.src 進(jìn)行圖片的顯示

    <div class="sss">
        <input id="pictrue" type="file" accept="*/image">
    </div>
    <script>
        let inputpic = document.querySelector('#pictrue')
        let sss = document.querySelector('.sss')
        inputpic.addEventListener('change', function(e) {
            let file = this.files[0]
            let url = window.URL.createObjectURL(new Blob([file]))
            let im = document.createElement('img')
            im.src = url
            sss.appendChild(im)
        })
    </script>

4、文件分片

fp2.png

在這里我們可以看到 ，上傳圖片在其中的原型上有Blob對象，意味著我們可以直接使用Blob的方法,(這里的示例還是用上面的代碼)（切割主要用到slice）

    <div class="sss">
        <input id="pictrue" type="file" accept="*/image">
    </div>
    <script>
       let inputpic = document.querySelector('#pictrue')
        let sss = document.querySelector('.sss')
        let arrupload = []
        inputpic.addEventListener('change', function(e) {
            let fileblob = this.files[0]
            const end = fileblob.size
            const chunk = 2000
            let start = 0
            while (start < end) {
                arrupload.push(fileblob.slice(start, start + chunk))
                // 實(shí)際使用中應(yīng)直接使用下面的方法 直接調(diào)用接口上傳bolb對象, 我現(xiàn)在這里把每個blob對象打印處理方便大家看到
                // uploadFn(fileblob.slice(start, start + chunk))
                start = start + chunk
            }
            console.log(fileblob.size)
            console.log(arrupload)
        })
</script>

blobupload.png

在這里可以看， 文件被分成了46份

讀取文件

FileReader()
想要讀取Blob或者文件對象并轉(zhuǎn)化為其他格式的數(shù)據(jù)，可以借助FileReader對象的API進(jìn)行操作

FileReader.readAsText(Blob)：將Blob轉(zhuǎn)化為文本字符串
FileReader.readAsArrayBuffer(Blob)： 將Blob轉(zhuǎn)為ArrayBuffer格式數(shù)據(jù)
FileReader.readAsDataURL(): 將Blob轉(zhuǎn)化為Base64格式的Data URL

使用例子

          const reader = new FileReader()
          reader.readAsText(response.data) // 以text文本顯示
          reader.onload = function(event) {
            const { message } = JSON.parse(reader.result)
            Massage.info(message) // 將錯誤信息顯示出來
          }

補(bǔ)充：MIME類型

用來表示 文件流/文檔 用什么格式
瀏覽器用何種形式來處理URL
常見類型有
txt text/plain
doc application/msword
exe application/octet-stream
pdf application/pdf
ps application/postscript
xlm application/vnd.ms-excel
xls application/vnd.ms-excel
ppt application/vnd.ms-powerpoint
gz application/x-gzip
zip application/zip
mp3 audio/mpeg
wav audio/x-wav
bmp image/bmp
gif image/gif
jpe image/jpeg
jpeg image/jpeg
jpg image/jpeg
mpg video/mpeg
mov video/quicktime

使用場景：

前端請求后端的時候返回一個流文件，這時候可以判斷流文件的類型， 來做出正確的處理

export const downloadEcxel = (imageUrl, name) => {
  const token = store.getState().user.tokenHead +  store.getState().user.token
  axios.get(imageUrl, {
    headers: {
      'Authorization': token,
    },
    responseType: 'blob', // axios 添加blob type
  })
    .then(function(response) {
      if (response.status >= 200 || response.status <= 300) {
        let resData = response.data
        if (resData.type === 'application/json') {
          // 將blob文件流轉(zhuǎn)換成json
          const reader = new FileReader()
          reader.readAsText(response.data) // 以text文本顯示
          reader.onload = function(event) {
            const { code, message } = JSON.parse(reader.result)
            console.log(message) // 將錯誤信息顯示出來
          }
        } else {
          // new Blob() 對返回的文件流類型處理
          const blob = window.URL.createObjectURL(new Blob([resData], { type: 'application/ms-excel'}));
          console.log(blob)
          //   生成一個a元素
          let a = document.createElement('a')
          // 創(chuàng)建一個單擊事件
          let event = new MouseEvent('click')
          // 圖片名稱
          a.download = '訂單數(shù)據(jù)報表' + new Date().getTime() + '.xlsx' // 默認(rèn)的名稱
          // 將生成的URL設(shè)置為a.href屬性
          a.href = blob
          a.dispatchEvent(event)
        }
      } else {
        console.log('下載失敗')
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

有不對的大家可以留言，看到會回復(fù)