【JS】前端文件读取FileReader操作总结

前言:开发中经常遇到文件上传的场景,有时需要前端将文件内容读取出来再以base64格式传到接口。

目录

  • FileReader
    • 主要方法
      • readAsArrayBuffer(blob)
      • readAsText(blob, [encoding])
      • readAsDataURL(blob)
    • 主要事件
    • React + antd Upload 组件示例

FileReader

FileReader 是一个对象,允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

构造函数:

let reader = new FileReader(); // 没有参数

主要方法

readAsArrayBuffer(blob)

将数据读取为二进制格式的 ArrayBuffer。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

reader.readAsArrayBuffer(blob)

readAsText(blob, [encoding])

将数据读取为给定编码(默认为 utf-8 编码)的文本字符串。

instanceOfFileReader.readAsText(blob[, encoding]);

readAsDataURL(blob)

读取二进制数据,并将其编码为 base64 的 data url。

reader.readAsDataURL(blob);

读取方法都是异步的,也就是说只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回 undefined。必须要挂载 实例下的 onload 或 onloadend 的方法才能处理转化后的结果

FileReader的三个属性:

  1. error: 返回读取时的错误信息
  2. readyState: 返回操作的当前状态
  3. result: 返回读取文件的结果

读取文件的示例:
参考 https://blog.csdn.net/qq_60440599/article/details/136071142

<input type="file" onchange="readFile(this)"><script>
function readFile(input) {let file = input.files[0];let fileReader= new FileReader();fileReader.readAsText(file);// 或者 fileReader.readAsArrayBuffer(file)/*** 该方法在读取时调用*/fileReader.onloadstart = () => {console.log("开始读取")console.log(fileReader.readyState)//调用函数,但还没有结束,返回1}/*** 该方法在读取成功时调用*/fileReader.onload = () => {console.log("读取成功")console.log(fileReader.result)console.log(fileReader.readyState)//调用完成,返回2}/*** 该方法在读取结束时调用*/fileReader.onloadend = () => {console.log("读取结束")}/*** 读取过程中触发*/fileReader.onprogress = (e) => {console.log("读取中")//获取已经加载的数据量console.log("loaded==>" + e.loaded)}/*** 该方法在调用abort函数时触发*/fileReader.onabort = () => {console.log("操作终止")}//当读取出现失败时触发fileReader.onerror = () => {console.log("出现错误")console.log(fileReader.error)}
}
</script>

read 方法的选择tips:

  • readAsArrayBuffer —— 用于二进制文件,执行低级别的二进制操作。对于诸如切片(slicing)之类的高级别的操作,File 是继承自 Blob 的,所以可以直接调用它们,而无需读取。
  • readAsText —— 用于文本文件,当我们想要获取字符串时。
  • readAsDataURL —— 用于在 src 中使用此数据,并将其用于img 或其他标签时。

    还有一种用于此的读取文件的替代方案:URL.createObjectURL(file)

示例:根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签

<input type="file" id="file">
<img  id="img">let file = document.getElementById("file")
let img= document.getElementById("img")
file.addEventListener("change", (e) => {let fileList=e.target.files//先获取一份文件//这里获取的才是File对象let file = fileList[0]//因为file也是Blob对象,所以直接传入即可img.src=URL.createObjectURL(file)
})

主要事件

读取过程中,有以下事件:

  • loadstart —— 开始加载。
  • progress —— 在读取过程中出现,当FileReader读取数据时,进度事件会定期触发。
  • load —— 读取完成时触发,没有 error。
  • abort —— 在中止读取时会触发 abort 事件:例如程序调用 abort()。。
  • error —— 出现 error时触发。
  • loadend —— 读取完成,无论成功还是失败。

读取完成后,可以通过以下方式访问读取结果:

  • reader.result 是结果(如果成功)
  • reader.error 是 error(如果失败)。

检测浏览器对 FileReader 的支持:

if(window.FileReader) {var fr = new FileReader();// add your code here
}else {alert("Not supported by your browser!");
}

React + antd Upload 组件示例

场景: 表单文件上传,读取后以base64格式与表单一起传给后端。

<UploadmaxCount={1}accept=".jpg,.jpeg,.png"beforeUpload={(file) => {console.log('文件类型', file.type, file);// 限制文件类型const allowTypes = ['image/png','image/jpeg','image/jpg',];const isAllowType = allowTypes.includes(file.type);// 校验文件大小和类型if (!isAllowType || file.size / 1024 / 1024 > 4) {message.error('文件格式大小错误');return Upload.LIST_IGNORE;}const reader = new FileReader();//将上传的文件读取成base64reader.readAsDataURL(file);reader.onloadend = function () {console.log('文件Base64内容',reader.result, file);};// 阻止上传,为了最后和表单一起提交return false;}}
><Button icon={<UploadOutlined />} type="primary">文件上传</Button>
</Upload>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue Router基础知识整理

Vue Router基础知识整理 1. 安装与使用&#xff08;Vue3&#xff09;安装使用 2. 配置路径别名和VSCode路径提示&#xff08;了解&#xff09;3. 使用查询字符串或路径传参query动态路由 与 params 4. router-link、定义别名、定义路由名称、编程式导航定义别名 aliasrouter-li…

李沐66_使用注意力机制的seq2seq——自学笔记

加入注意力 1.编码器对每次词的输出作为key和value 2.解码器RNN对上一个词的输出是query 3.注意力的输出和下一个词的词嵌入合并进入RNN 一个带有Bahdanau注意力的循环神经网络编码器-解码器模型 总结 1.seq2seq通过隐状态在编码器和解码器中传递信息 2.注意力机制可以根…

ELK技术介绍:背景、功能及应用场景全面解析

一、ELK概述 ELK是由Elasticsearch、Logstash和Kibana三个开源软件组成的日志管理解决方案&#xff0c;这一组合在近年来得到了广泛的关注和应用。ELK的出现&#xff0c;源于大数据和云计算技术的快速发展&#xff0c;以及对高效日志管理的迫切需求。 随着企业信息化程度…

【10-10-10旁观思维】项目管理必会的思维分析工具 08(送模板~)

&#x1f468;‍&#x1f4bb;&#x1f469;‍&#x1f4bb;面对一个决策或选择&#xff0c;当你犹豫不决时&#xff0c;可以想一下 ⏰10分钟后&#xff0c;自己是怎么看待自己现在的决策&#xff0c;依然保持一致亦或会后悔&#xff1b; ⏰10个月后&#xff0c;你又会如何思…

Javascript 插值搜索与二分搜索

插值搜索和二分搜索都是在有序数组中查找目标元素的算法。它们之间的核心区别在于确定中间元素的方式。 1、二分搜索&#xff08;Binary Search&#xff09;&#xff1a;二分搜索是一种通过将目标值与数组中间元素进行比较&#xff0c;然后根据比较结果缩小搜索范围的算…

Docker资源管理-数据管理

一、CPU 资源控制&#xff1a; 1.cgroups&#xff1a; cgroups&#xff0c;是一个非常强大的linux内核工具&#xff0c;他不仅可以限制被 namespace 隔离起来的资源&#xff0c; 还可以为资源设置权重、计算使用量、操控进程启停等等。 所以 cgroups&#xff08;Control grou…

深度剖析SSD掉电保护机制-1

随着固态硬盘&#xff08;Solid State Drives, SSD&#xff09;在数据中心、企业存储、个人计算设备等领域广泛应用&#xff0c;其数据安全性与可靠性成为至关重要的考量因素。其中&#xff0c;应对突发电源故障导致的数据丢失风险的掉电保护&#xff08;Power Loss Protection…

MA-Chitosan MA甲基丙烯酸修饰羧甲基壳聚糖 MA-Chitosan

MA-Chitosan MA甲基丙烯酸修饰羧甲基壳聚糖 MA-Chitosan、 【中文名称】甲基丙烯酸化羧甲基壳聚糖 【英文名称】Chitosan-MA 【结 构】 【纯 度】95%以上 【保 存】-20℃ 【规 格】10mg,500mg,1g,5g,10g 【产品特性】 Chitosan-MA&#xff08;壳聚糖-甲基丙烯酸…

Verilog基础语法——parameter、localparam与`define

Verilog基础语法——parameter、localparam与define 写在前面一、localparam二、parameter三、define写在最后 写在前面 在使用Verilog编写RTL代码时&#xff0c;如果需要定义一个常量&#xff0c;可以使用define、parameter和localparam三种进行定义与赋值。 一、localparam …

大模型都在用的:旋转位置编码

写在前面 这篇文章提到了绝对位置编码和相对位置编码&#xff0c;但是他们都有局限性&#xff0c;比如绝对位置编码不能直接表征token的相对位置关系&#xff1b;相对位置编码过于复杂&#xff0c;影响效率。于是诞生了一种用绝对位置编码的方式实现相对位置编码的编码方式——…

机器学习day1

一、人工智能三大概念 人工智能三大概念 人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;和深度学习&#xff08;DL&#xff09; 人工智能&#xff1a;人工智能是研究计算代理的合成和分析的领域。人工智能是使用计算机来模拟&#xff0c;而不是人类…

关于Android中的限定符

很多对于Android不了解或是刚接触Android的初学者来说&#xff0c;对于Android开发中出现的例如layout-large或者drawable-xxhdpi这样的文件夹赶到困惑&#xff0c;这这文件夹到底有什么用&#xff1f;什么时候用&#xff1f;这里简单的说一下。 其实&#xff0c;在上面例子中&…

基于OpenCV的人脸签到系统

效果图 目录文件 camerathread.h 功能实现全写在.h里了 class CameraThread : public QThread {Q_OBJECT public:CameraThread(){//打开序号为0的摄像头m_cap.open(0);if (!m_cap.isOpened()) {qDebug() << "Error: Cannot open camera";}//判断是否有文件,人脸…

iframe实现pdf预览,并使用pdf.js修改内嵌标题,解决乱码问题

项目中遇到文件预览功能,并且需要可以打印文件.下插件对于内网来说有点麻烦,正好iframe预览比较简单,且自带下载打印等功能按钮. 问题在于左上方的文件名乱码,网上找了一圈没有看到解决的,要么就是要收费要会员(ztmgs),要么直接说这东西改不了. 使用: 1.引入 PDF.js 库&…

Spring Boot集成Redisson实现延迟队列

项目场景&#xff1a; 在电商、支付等领域&#xff0c;往往会有这样的场景&#xff0c;用户下单后放弃支付了&#xff0c;那这笔订单会在指定的时间段后进行关闭操作&#xff0c;细心的你一定发现了像某宝、某东都有这样的逻辑&#xff0c;而且时间很准确&#xff0c;误差在1s内…

与AI对话:探索最佳国内可用的ChatGPT网站

与AI对话&#xff1a;探索最佳国内可用的ChatGPT网站 &#x1f310; 链接&#xff1a; GPTGod 点击可注册 &#x1f3f7;️ 标签&#xff1a; GPT-4 支持API 支持绘图 Claude &#x1f4dd; 简介&#xff1a;GPTGod 是一个功能全面的平台&#xff0c;提供GPT-4的强大功能&…

JavaEE——Spring Boot + jwt

目录 什么是Spring Boot jwt&#xff1f; 如何实现Spring Boot jwt&#xff1a; 1. 添加依赖 2、创建JWT工具类 3. 定义认证逻辑 4. 添加过滤器 5、 http请求测试 什么是Spring Boot jwt&#xff1f; Spring Boot和JWT&#xff08;JSON Web Token&#xff09;是一对常…

苍穹外卖学习

并不包含全部视频内容&#xff0c;大部分都按照操作文档来手搓代码&#xff0c;资料&#xff0c;代码都上传git。 〇、实际代码 0.1 Result封装 package com.sky.result;import lombok.Data;import java.io.Serializable;/*** 后端统一返回结果* param <T>*/ Data pub…

启动MySQL服务

在 Windows 系统上&#xff1a; 首先&#xff0c;找到 MySQL 安装目录&#xff0c;一般默认是在 C:\Program Files\MySQL 文件夹下。进入该目录下的 bin 文件夹。找到 mysqld.exe 文件&#xff0c;双击运行它。 在 Linux 系统&#xff08;以 CentOS 为例&#xff09;&#xff…

软考 系统架构设计师系列知识点之软件可靠性基础知识(5)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件可靠性基础知识&#xff08;4&#xff09; 所属章节&#xff1a; 第9章. 软件可靠性基础知识 第1节 软件可靠性基本概念 9.1.3 可靠性目标 前文定量分析软件的可靠性时&#xff0c;使用失效强度来表示软件缺陷对…