日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
Web開發(fā)中Blob與FileAPI使用簡述

 本文節(jié)選自 Awesome CheatSheet/DOM CheatSheet，主要是對 DOM 操作中常見的 Blob、File API 相關概念進行簡要描述。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的崇陽網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

Web 開發(fā)中 Blob 與 FileAPI 使用簡述

Blob 是 JavaScript 中的對象，表示不可變的類文件對象，里面可以存儲大量的二進制編碼格式的數據。Blob 對象的創(chuàng)建方式與其他并無區(qū)別，構造函數可接受數據序列與類型描述兩個參數：

 
 
 
    
  
  
  
  1. const debug = { hello: 'world' };let blob = new Blob([JSON.stringify(debug, null, 2)], { 
    2. 
  
  
  
  2.   type: 'application/json'});// Blob(22) {size: 22, type: "application/json"}// 也可以轉化為類 URL 格式const url = URL.createObjectURL(blob);// "blob:https://developer.mozilla.org/88c5b6de-3735-4e02-8937-a16cc3b0e852"http:// 設置自定義的樣式類blob = new Blob(['body { background-color: yellow; }'], { 
    3. 
  
  
  
  3.   type: 'text/css'}); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. link = document.createElement('link'); 
    6. 
  
  
  
  6. link.rel = 'stylesheet';//createObjectURL returns a blob URL as a string.link.href = URL.createObjectURL(blob); 
    7.

其他的類型轉化為 Blob 對象可以參考 covertToBlob.js，將 Base64 編碼的字符串或者 DataUrl 轉化為 Blob 對象。Blob 包括了 size 與 type，以及常用的用于截取的 slice 方法等屬性。Blob 對象能夠添加到表單中，作為上傳數據使用：

 
 
 
    
  
  
  
  1. const content = 'hey!'; // the body of the new file...const blob = new Blob([content], { type: 'text/xml' }); 
    2. 
  
  
  
  2. formData.append('webmasterfile', blob); 
    3.

slice 方法會返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內的數據。其實就是對這個 blob 中的數據進行切割，我們在對文件進行分片上傳的時候需要使用到這個方法，即把一個需要上傳的文件進行切割，然后分別進行上傳到服務器：

 
 
 
    
  
  
  
  1. const BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .const blob = document.getElementById('file').files[0];const slices = Math.ceil(blob.size / BYTES_PER_CHUNK);const blobs = [];Array.from({ length: slices }).forEach(function(item, index) { 
    2. 
  
  
  
  2.   blobs.push(blob.slice(index, index + 1)); 
    3. 
  
  
  
  3. }); 
    4.

這里我們使用的 blob 對象實際上是 HTML5 中的 File 對象；HTML5 File API 允許我們對本地文件進行讀取、上傳等操作，主要包含三個對象：File，F(xiàn)ileList 與用于讀取數據的 FileReader。File 對象就是 Blob 的分支，或者說子集，表示包含某些元數據的單一文件對象；FileList 即是文件對象的列表。FileReader 能夠用于從 Blob 對象中讀取數據，包含了一系列讀取文件的方法與事件回調，其基本用法如下：

 
 
 
    
  
  
  
  1. const reader = new FileReader(); 
    2. 
  
  
  
  2. reader.addEventListener('loadend', function() { 
    3. 
  
  
  
  3.   // reader.result 包含了 Typed Array 格式的 Blob 內容}); 
    4. 
  
  
  
  4. reader.readAsArrayBuffer(blob); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. blob = new Blob(['This is my blob content'], { type: 'text/plain' }); 
    7. 
  
  
  
  7. read.readAsText(bolb); // 讀取為文本// reader.readAsArrayBuffer   //將讀取結果封裝成 ArrayBuffer ，如果想使用一般需要轉換成 Int8Array 或 DataView// reader.readAsBinaryString  // 在IE瀏覽器中不支持改方法// reader.readAsTex // 該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8// reader.readAsDataURL  // 讀取結果為DataURL// reader.readyState // 上傳中的狀態(tài) 
    8.

在圖片上傳中，我們常常需要獲取到本地圖片的預覽，參考 antd/Upload 中的處理：

 
 
 
    
  
  
  
  1. // 將文件讀取為 DataURLconst previewFile = (file: File, callback: Function) => { 
    2. 
  
  
  
  2.   const reader = new FileReader(); 
    3. 
  
  
  
  3.   reader.onloadend = () => callback(reader.result); 
    4. 
  
  
  
  4.   reader.readAsDataURL(file); 
    5. 
  
  
  
  5. }; 
    6. 
  
  
  
  6. // 設置文件的 DataUrlpreviewFile(file.originFileObj, (previewDataUrl: string) => { 
    7. 
  
  
  
  7.   file.thumbUrl = previewDataUrl; 
    8. 
  
  
  
  8. }); 
    9. 
  
  
  
  9. // JSX; 
    10.

另一個常用的場景就是獲取剪貼板中的圖片，并將其預覽展示，可以參考 coding-snippets/image-paste:

 
 
 
    
  
  
  
  1. const cbd = e.clipboardData;const fr = new FileReader(); 
    2. 
  
  
  
  2. for (let i = 0; i < cbd.items.length; i++) { 
    3. 
  
  
  
  3.   const item = cbd.items[i]; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.   if (item.kind == 'file') { 
    6. 
  
  
  
  6.     const blob = item.getAsFile(); 
    7. 
  
  
  
  7.     if (blob.size === 0) { 
    8. 
  
  
  
  8.       return; 
    9. 
  
  
  
  9.     } 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.     previewFile(blob); 
    12. 
  
  
  
  12.   } 
    13. 
  
  
  
  13. } 
    14.

標準的 Web 標準中提供了 FileReader 對象進行讀取操作，不過 Chrome 中提供了 FileWriter 對象，允許我們在瀏覽器沙盒中創(chuàng)建文件，其基于 requestFileSystem 方法：

 
 
 
    
  
  
  
  1. // 僅可用于 Chrome 瀏覽器中window.requestFileSystem = 
    2. 
  
  
  
  2.   window.requestFileSystem || window.webkitRequestFileSystem; 
    3. 
  
  
  
  3. window.requestFileSystem(type, size, successCallback, opt_errorCallback); 
    4.

簡單的文件創(chuàng)建與寫入如下所示：

 
 
 
    
  
  
  
  1. function onInitFs(fs) { 
    2. 
  
  
  
  2.   fs.root.getFile( 
    3. 
  
  
  
  3.     'log.txt', 
    4. 
  
  
  
  4.     { create: true }, 
    5. 
  
  
  
  5.     function(fileEntry) { 
    6. 
  
  
  
  6.       // Create a FileWriter object for our FileEntry (log.txt).      fileEntry.createWriter(function(fileWriter) { 
    7. 
  
  
  
  7.         fileWriter.onwriteend = function(e) { 
    8. 
  
  
  
  8.           console.log('Write completed.'); 
    9. 
  
  
  
  9.         }; 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.         fileWriter.onerror = function(e) { 
    12. 
  
  
  
  12.           console.log('Write failed: ' + e.toString()); 
    13. 
  
  
  
  13.         }; 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.         // Create a new Blob and write it to log.txt.        var blob = new Blob(['Lorem Ipsum'], { type: 'text/plain' }); 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.         fileWriter.write(blob); 
    18. 
  
  
  
  18.       }, errorHandler); 
    19. 
  
  
  
  19.     }, 
    20. 
  
  
  
  20.     errorHandler 
    21. 
  
  
  
  21.   ); 
    22. 
  
  
  
  22. } 
    23. 
  
  
  
  23. window.requestFileSystem(window.TEMPORARY, 1024 * 1024, onInitFs, errorHandler); 
    24.

 【本文是專欄作者“張梓雄 ”的原創(chuàng)文章，如需轉載請通過與作者聯(lián)系】

戳這里，看該作者更多好文


新聞標題：Web開發(fā)中Blob與FileAPI使用簡述
標題URL：http://www.5511xx.com/article/djiisgc.html