溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹前端的文件流flie是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
領導提出一個問題，能不能不借助端的能力，實現本地分段讀取數據分段顯示。在沒有特別大的性能要求或者明確提出要求的情況下一般是一次性加載所有的數據并渲染，但是如果數據量大或者手機性能不好的話就會有別的問題了。
聽到這個的時候我是懵逼的，我啥也不知道，但是我同事實現了，寫了一個簡單的demo
假設只上傳一個文件
上傳文件目前前端最常見的是借助 input 的 type='file'（還有DataTransfer和HTMLCanvasElement可以實現，不介紹了）File
文件上傳成功之后就會返回一個FileList 對象（event.target.files[0]里面包含了所有與文本相關的信息，包括文本流，文本流我們可能肉眼不可見）
console.log('[FileList 對象]:',event.target.files[0])
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);復制代碼具體實現我還么有寫，思路到這里，日后補上
Blob
Blob/slice
File
Input/file
我記得很早之前寫過不借助端的力量實現本地上傳預覽圖片音頻文件，那個時候就有提到過用過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對象
那就要看哪些對象可以用他做搞一些事情
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>復制代碼FileReader
以上是前端的文件流flie是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
