JavaScript中`FileReader`

读取相关内容

提供了4个API读取内容

readAsDataURL：将内容读取为Base64，用于图片文本相关
readAsText：将内容读取为文本
fileReaderBinaryString将内容读取为二进制字符串
fileReaderBuffer：将内容读取为buffer，一般用于图片、视频等媒体

其中包含3个有用的事件

onload：文件加载成功后触发，如果想要终止读取可以调用

  // 文本读取
  const fileReaderText = new FileReader();
 fileReaderText.abort()

onerror：发送错误时触发
onprogress:读取时的进度条，每个50毫秒执行一次，与XHR的progress有相同属性，读取进度${ev.loaded}/${ev.total}

读取错误码解释

FileReader 对象的 onerror 事件处理器中的错误码（error.code）用于指示读取文件时遇到的具体错误类型。这些错误码是 DOMException 对象的一部分，它们帮助开发者了解在文件读取过程中发生了什么问题。以下是常见的错误码及其解释：

NotFoundError (1) : 这个错误码表示请求的资源（文件）未找到。这可能是因为文件不存在于指定的路径，或者文件已经被移动或删除。

SecurityError (2) : 这个错误码表明文件读取操作违反了安全策略。例如，如果尝试读取一个跨域的文件，浏览器的安全策略可能会阻止这种操作。

AbortError (3) : 这个错误码表示文件读取操作被中止。这通常发生在调用 FileReader 的 abort() 方法时，主动停止文件读取过程。

NotReadableError (4) : 这个错误码表示文件无法被读取。可能的原因包括文件被锁定、文件系统权限问题，或者文件损坏。

EncodingError (5) : 这个错误码表示文件读取过程中发生了编码错误。这可能是因为文件内容不符合预期的格式或编码方式。

了解这些错误码有助于开发者诊断和解决文件读取过程中遇到的问题。在实际应用中，根据错误码进行适当的错误处理和用户反馈是非常重要的。例如，如果遇到 NotFoundError，可以提示用户检查文件路径；如果遇到 SecurityError，则可能需要调整应用的安全策略或请求用户修改浏览器设置。

<script lang="ts" setup>
import { ref } from 'vue';

const imageSrc = ref();
const textValue = ref();
const binaryString = ref();
const buffer = ref();

const onFileChange = (event: Event) => {
  // 读取为buffer内容
  const fileReaderBuffer = new FileReader();
  // base64读取
  const fileReaderBase64 = new FileReader();
  // 文本读取
  const fileReaderText = new FileReader();
  // 读取为二进制字符串
  const fileReaderBinaryString = new FileReader();
  // 获取文件
  const files = (event.target as HTMLInputElement).files;

  if (files && files.length > 0) {
   // 读取为Base64编码
   fileReaderBase64.readAsDataURL(files[0]);
   fileReaderBase64.onload = () => {
    imageSrc.value = fileReaderBase64.result;
    console.log(fileReaderBase64.result);
   };

   // 读取文本内容
   fileReaderText.readAsText(files[0]);
   fileReaderText.onload = () => {
    textValue.value = fileReaderText.result;
   };

   // 读取为二进制字符串
   fileReaderBinaryString.readAsBinaryString(files[0]);
   fileReaderBinaryString.onload = () => {
    binaryString.value = fileReaderBinaryString.result;
   };

   // 读取为buffer
   fileReaderBuffer.readAsArrayBuffer(files[0]);
   fileReaderBuffer.onloadend = () => {
    buffer.value = fileReaderBuffer.result;
   };

   // 读取进度条
   fileReaderBinaryString.onprogress = (ev: ProgressEvent) => {
    console.log(`${ev.loaded}/${ev.total}`);
   };

   // 读取错误时错误码
   fileReaderBinaryString.onerror = (ev: any) => {
    console.log(ev.code);
    console.log(fileReaderBinaryString.error?.code);
   };
  }
};
</script>

<template>
  <input type="file" @change="onFileChange" />
  <br />
  <!-- buffer 图片-->
  <img v-if="buffer" :src="imageSrc" alt="" class="card-img w-[200px] h-[200px]" />
  <br />
  <!-- base64图片 -->
  <img v-if="imageSrc" :src="imageSrc" alt="" class="card-img w-[200px] h-[200px]" />
  <br />
  <!-- 字符串内容 -->
  <textarea :value="textValue" class="w-[600px]" rows="6" />
  <br />
  <!-- 二进制文本内容 -->
  <textarea :value="binaryString" class="w-[600px]" rows="6" />
</template>

JavaScript中FileReader

JavaScript中FileReader

读取相关内容

JavaScript中`FileReader`