介紹前端的檔案流flie

javascript欄位介紹前端的檔案流flie。

背景

領導提出一個問題，能不能不借助端的能力，實現本地分段讀取資料分段顯示。在沒有特別大的性能要求或明確提出要求的情況下一般是一次性加載所有的數據並渲染，但是如果數據量大或者手機性能不好的話就會有別的問題了。

聽到這個的時候我是懵逼的，我啥也不知道，但是我同事實現了，寫了一個簡單的demo

前端的實現

假設只上傳一個檔案

1. 上傳檔案目前前端最常見的是藉助input 的type='file'（還有DataTransfer和HTMLCanvasElement可以實現，不介紹了）File

2. 檔案上傳成功之後就會傳回一個FileList 物件（event.target.files[0]裡麵包含了所有與文字相關的資訊，包括文字流，文字流我們可能肉眼不可見）

console.log('[FileList 物件]:',event.target.files[0])

3. File接口是基於Blod，所以Blod有的屬性和方法，File也會有，例如slice=> 截取來源Blob 物件中指定範圍內的數據，text=>傳回一個promise且包含blob所有內容的UTF-8格式（就是把我們blod轉換成我們可以讀懂的utf-8的格式）

  const fileDate = event.target.files[0]
  let text = await fileDate.slice(1, 10).text()
  console.log('[截取一段Blod对象]', fileDate.slice(1, 10));
  console.log('[Blod对象转化为文本]', text);复制代码

4. 既然FileList 物件繼承於Blod對象，Blod物件物件又有slice和text方法。所以之前的那個需求就很好實現了

具體實現我還麼有寫，思路到這裡，日後補上

Blob

Blob/slice

File

Input/file

其他與流有關的API

我記得很早之前寫過不借助端的力量實現本地上傳預覽圖片音訊文件，那時候就有提到用過Blod對象，FileReader對象，還有createObjectURL，但是這次剛好可以把這些都整合起來，一起說一下

var aBlob = new Blob ( array, options );

參數,array 是由ArrayBuffer, ArrayBufferView, Blob, DOMString 等物件構成的Array ，或其他類似物件的混合體，它將被放進Blob。 DOMStrings會被編碼為UTF-8。 options不介紹了

Blob 物件表示一個不可變、原始資料的類別檔案物件。它的資料可以按文字或二進位的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。

=> 這樣說的話就是一段我們認識文本可以透過new Blod可以轉換成Blod物件

問題Blod能夠做什麼？ ？

那就要看哪些物件可以用他做搞一些事情

下載網頁中某段文字或日誌

URL.createObjectURL() 她的參數就是Blod對象，用來建立一個url;可以結合a元素的download屬性，實現一段日誌或文字的下載

  <buttom>复制文本 </buttom>
 function onCopyHandle() { // 创建隐藏的可***链接
    let content = `
    name: sunseekers
    role: student
    houseName: shanghai
    url: https://github.com/sunseekers
    userAgent: ${navigator.userAgent}
    log:'这里是日志内容'
    `.trim();

    let filename = 'logFiles.md'
    const eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';

    const blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob); // 字符内容转变成blob地址

    document.body.appendChild(eleLink);
    eleLink.click(); // 触发点击
    document.body.removeChild(eleLink); // 然后移除

    Message.success('日志下载成功')
  };复制代码

本地預覽上傳圖片

圖片可以用img標籤顯示也可以用canvas畫，看需求

  <p>
    <input>
    <img  alt="介紹前端的檔案流flie" >
  </p>

<script>
  let inputEle = document.querySelector("input")
  let img = document.querySelector("img")

  inputEle.addEventListener(&#39;change&#39;, async function (event) {
    const fileDate = event.target.files[0]
    const fileReader = new FileReader()
    fileReader.readAsDataURL(fileDate)
    fileReader.onload = e => {
      img.src = e.target.result
    }

  })
</script>复制代码

又學到一個新的API=>FileReader

FileReader

寫完發現

原來這些在之前的文章裡面都有用過只是我沒有想起來，或是被遺忘了，這又是一篇重複率很高的文章。當你對一個物件及他週邊的屬性屬性的時候就可以做很多事了。完了做一次總結和回顧感覺很不一樣，原來很多東西都是可以重複利用的，或者說在某一個基礎之上做了擴展和昇華，又能過做很多很有意義的事情了。與我而言又一次更加清晰的意識到這裡前端與本地數據，流有關的知識點

今後可以繼續擴展學習的知識點,這些都是與流有關的

MediaSource 物件

ReadableStream

Streams API

ArrayBuffer

相關免費學習推薦：# javascript（影片）

#

以上是介紹前端的檔案流flie的詳細內容。更多資訊請關注PHP中文網其他相關文章！