欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

前端的文件流flie是什么

這篇文章主要介紹前端的文件流flie是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們擁有10年網(wǎng)頁設計和網(wǎng)站建設經(jīng)驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設計師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站、微信開發(fā)、小程序制作、手機網(wǎng)站制作設計、H5頁面制作、等業(yè)務。無論您有什么樣的網(wǎng)站設計或者設計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設計服務并滿足您的需求。

背景

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

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

前端的實現(xiàn)

假設只上傳一個文件

  1. 上傳文件目前前端最常見的是借助 input 的 type='file'（還有DataTransfer和HTMLCanvasElement可以實現(xiàn)，不介紹了）File

  2. 文件上傳成功之后就會返回一個FileList 對象（event.target.files[0]里面包含了所有與文本相關的信息，包括文本流，文本流我們可能肉眼不可見）

console.log('[FileList 對象]:',event.target.files[0])

  1. File接口是基于Blod，所以Blod有的屬性和方法，F(xiàn)ile也會有，比如slice=> 截取源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)，text=>返回一個promise且包含blob所有內(nèi)容的UTF-8格式（就是把我們blod轉(zhuǎn)化為我們可以讀懂的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對象轉(zhuǎn)化為文本]', text);復制代碼
  1. 既然FileList 對象繼承于Blod對象，Blod對象對象又有slice和text方法。所以之前的那個需求就很好實現(xiàn)了

具體實現(xiàn)我還么有寫，思路到這里，日后補上

Blob

Blob/slice

File

Input/file

其他與流有關的API

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

var aBlob = new Blob( array, options );

參數(shù),array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其他類似對象的混合體，它將會被放進 Blob。DOMStrings會被編碼為UTF-8。options不介紹了

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作。

=> 這樣說的話就是一段我們認識文本可以通過new Blod可以轉(zhuǎn)化為Blod對象

問題Blod能夠做什么？？

那就要看哪些對象可以用他做搞一些事情

下載網(wǎng)頁中某段文本或者日志

URL.createObjectURL() 她的參數(shù)就是Blod對象，用來創(chuàng)建一個url;可以結合a元素的download屬性，實現(xiàn)一段日志或者文本的下載

  <buttom onclick="onCopyHandle()">復制文本 </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('日志下載成功')
  };復制代碼

本地預覽上傳圖片

圖片可以用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

以上是前端的文件流flie是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：前端的文件流flie是什么
URL分享：http://chinadenli.net/article18/pphigp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、ChatGPT、微信小程序、小程序開發(fā)、營銷型網(wǎng)站建設、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營