介紹前端的檔案流flie
javascript欄位介紹前端的檔案流flie。
背景
領導提出一個問題，能不能不借助端的能力，實現本地分段讀取資料分段顯示。在沒有特別大的性能要求或明確提出要求的情況下一般是一次性加載所有的數據並渲染，但是如果數據量大或者手機性能不好的話就會有別的問題了。
聽到這個的時候我是懵逼的，我啥也不知道，但是我同事實現了，寫了一個簡單的demo
前端的實現
假設只上傳一個檔案
-
上傳檔案目前前端最常見的是藉助input 的type='file'（還有DataTransfer和HTMLCanvasElement可以實現，不介紹了）File
檔案上傳成功之後就會傳回一個FileList 物件（event.target.files[0]裡麵包含了所有與文字相關的資訊，包括文字流，文字流我們可能肉眼不可見）
console.log('[FileList 物件]:',event.target.files[0])
- 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);复制代码- 既然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 onclick="onCopyHandle()">复制文本 </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畫，看需求
<body>
<p class="index">
<input type="file" value="上传文件">
<img width="100" height="100"></img>
</p>
</body>
<script>
let inputEle = document.querySelector("input")
let img = document.querySelector("img")
inputEle.addEventListener('change', 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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
JavaScript：探索網絡語言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
如何使用Next.js（前端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:22 AM
本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
使用Next.js（後端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
