背景

前端的实现

其他与流有关的API

问题Blod能够做什么？？

下载网页中某段文本或者日志

本地预览上传图片

又学到一个新的API=>FileReader

写完发现

今后可以继续扩展学习的知识点,这些都是与流有关的

首页

web前端

js教程

介绍前端的文件流flie

coldplay.xixi

Oct 30, 2020 pm 05:31 PM

javascript栏目介绍前端的文件流flie。

介绍前端的文件流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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热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)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7700

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1230

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。