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

前言：开辟中常常遇到文件上传的场景，偶然需要前端将文件内容读取出来再以base64格式传到接口。
  
  
FileReader

FileReader 是一个对象，允许 Web 应用步伐异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
构造函数：

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

复制代码

重要方法

readAsArrayBuffer(blob)

将数据读取为二进制格式的 ArrayBuffer。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 变乱，同时 result 属性中将包罗一个 ArrayBuffer 对象以表现所读取文件的数据。

1. reader.readAsArrayBuffer(blob)

复制代码

readAsText(blob, [encoding])

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

1. instanceOfFileReader.readAsText(blob[, encoding]);

复制代码

readAsDataURL(blob)

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

1. reader.readAsDataURL(blob);

复制代码

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

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

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

1. <input type="file" onchange="readFile(this)">
3. <script>
4. function readFile(input) {
5.   let file = input.files[0];
7.   let fileReader= new FileReader();
9.   fileReader.readAsText(file);
10.   // 或者 fileReader.readAsArrayBuffer(file)
11.   
12.   /**
13.    * 该方法在读取时调用
14.    */
15.   fileReader.onloadstart = () => {
16.       console.log("开始读取")
17.       console.log(fileReader.readyState)//调用函数,但还没有结束,返回1
18.   }
19.   /**
20.    * 该方法在读取成功时调用
21.    */
22.   fileReader.onload = () => {
23.       console.log("读取成功")
24.       console.log(fileReader.result)
25.       console.log(fileReader.readyState)//调用完成,返回2
26.   }
27.   /**
28.    * 该方法在读取结束时调用
29.    */
30.   fileReader.onloadend = () => {
31.       console.log("读取结束")
32.   }
33.   /**
34.    * 读取过程中触发
35.    */
36.   fileReader.onprogress = (e) => {
37.       console.log("读取中")
38.       //获取已经加载的数据量
39.       console.log("loaded==>" + e.loaded)
40.   }
41.   /**
42.    * 该方法在调用abort函数时触发
43.    */
44.   fileReader.onabort = () => {
45.       console.log("操作终止")
46.   }
47.   //当读取出现失败时触发
48.   fileReader.onerror = () => {
49.       console.log("出现错误")
50.       console.log(fileReader.error)
51.   }
52. }
53. </script>

复制代码

---

read 方法的选择tips：

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

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

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

复制代码

重要变乱

读取过程中，有以下变乱：

• loadstart —— 开始加载。
  
• progress —— 在读取过程中出现，当FileReader读取数据时，进度变乱会定期触发。
  
• load —— 读取完成时触发，没有 error。
  
• abort —— 在中止读取时会触发 abort 变乱：比方步伐调用 abort()。。
  
• error —— 出现 error时触发。
  
• loadend —— 读取完成，无论乐成还是失败。
  

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

• reader.result 是结果（如果乐成）
  
• reader.error 是 error（如果失败）。
  

检测浏览器对 FileReader 的支持：

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

复制代码

React + antd Upload 组件示例

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

1. <Upload
2.   maxCount={1}
3.   accept=".jpg,.jpeg,.png"
4.   beforeUpload={(file) => {
5.     console.log('文件类型', file.type, file);
6.     // 限制文件类型
7.     const allowTypes = [
8.       'image/png',
9.       'image/jpeg',
10.       'image/jpg',
11.     ];
12.     const isAllowType = allowTypes.includes(file.type);
13.                 // 校验文件大小和类型
14.     if (!isAllowType || file.size / 1024 / 1024 > 4) {
15.       message.error('文件格式大小错误');
16.       return Upload.LIST_IGNORE;
17.     }
18.     const reader = new FileReader();
19.     //将上传的文件读取成base64
20.     reader.readAsDataURL(file);
21.     reader.onloadend = function () {
22.             console.log('文件Base64内容',reader.result, file);
23.     };
24.     // 阻止上传，为了最后和表单一起提交
25.     return false;
26.   }}
27. >
28.   <Button icon={<UploadOutlined />} type="primary">
29.     文件上传
30.   </Button>
31. </Upload>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。