您好,登錄后才能下訂單哦!
這篇文章主要介紹前端的文件流flie是什么,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
領(lǐng)導(dǎo)提出一個問題,能不能不借助端的能力,實現(xiàn)本地分段讀取數(shù)據(jù)分段顯示。在沒有特別大的性能要求或者明確提出要求的情況下一般是一次性加載所有的數(shù)據(jù)并渲染,但是如果數(shù)據(jù)量大或者手機性能不好的話就會有別的問題了。
聽到這個的時候我是懵逼的,我啥也不知道,但是我同事實現(xiàn)了,寫了一個簡單的demo
假設(shè)只上傳一個文件
上傳文件目前前端最常見的是借助 input 的 type='file'(還有DataTransfer和HTMLCanvasElement可以實現(xiàn),不介紹了)File
文件上傳成功之后就會返回一個FileList 對象(event.target.files[0]里面包含了所有與文本相關(guān)的信息,包括文本流,文本流我們可能肉眼不可見)
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對象轉(zhuǎn)化為文本]', text);復(fù)制代碼
具體實現(xiàn)我還么有寫,思路到這里,日后補上
Blob
Blob/slice
File
Input/file
我記得很早之前寫過不借助端的力量實現(xiàn)本地上傳預(yù)覽圖片音頻文件,那個時候就有提到過用過Blod對象,F(xiàn)ileReader對象,還有createObjectURL,但是這一次恰好可以把這些都整合起來,一起說一下
var aBlob = new Blob( array, options );
參數(shù),array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構(gòu)成的 Array ,或者其他類似對象的混合體,它將會被放進 Blob。DOMStrings會被編碼為UTF-8。options不介紹了
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取,也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。
=> 這樣說的話就是一段我們認識文本可以通過new Blod可以轉(zhuǎn)化為Blod對象
那就要看哪些對象可以用他做搞一些事情
URL.createObjectURL() 她的參數(shù)就是Blod對象,用來創(chuàng)建一個url;可以結(jié)合a元素的download屬性,實現(xiàn)一段日志或者文本的下載
<buttom onclick="onCopyHandle()">復(fù)制文本 </buttom> function onCopyHandle() { // 創(chuàng)建隱藏的可***鏈接 let content = ` name: sunseekers role: student houseName: shanghai url: https://github.com/sunseekers userAgent: ${navigator.userAgent} log:'這里是日志內(nèi)容' `.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); // 字符內(nèi)容轉(zhuǎn)變成blob地址 document.body.appendChild(eleLink); eleLink.click(); // 觸發(fā)點擊 document.body.removeChild(eleLink); // 然后移除 Message.success('日志下載成功') };復(fù)制代碼
圖片可以用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>復(fù)制代碼
FileReader
以上是前端的文件流flie是什么的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。