Acerca de FileReader

FileReader

FileReader permite que una aplicación web lea de forma asincrónica el contenido de un archivo (o búfer de datos sin procesar) almacenado en la computadora del usuario, utilizando un objeto File o Blob para especificar el archivo o número que se leerá.

Atributos

Atributos	Descripción	valor de retorno
readyState	Proporciona el estado actual del FileReader durante la operación de lectura.	Number. 0: todavía no se han cargado datos; 1: se están cargando datos; 2: se han completado todas las solicitudes de lectura
resultado	Devuelve el contenido del archivo. Este atributo es válido solo después de que se completa la operación de lectura	Una cadena o un ArrayBuffer (según el método de lectura que se utilice)
error	Devuelve el mensaje de error al leer el archivo.	DOMError

Manejo de eventos

evento	Descripción
onloadstart	Se activa cuando se inicia la operación de lectura
en progreso	Activar al leer
onload	Se activa cuando se completa la operación de lectura
onloadend	Se activa al final de la operación de lectura (puede ser un éxito, puede ser un error)
onabort	Se activa cuando se interrumpe la operación de lectura
onerror	Se activa cuando se produce un error en la operación de lectura.

Combinado con la función de procesamiento de eventos, observe el readyState de cada etapa:

 <input id="test" type="file" onchange="getFile" />

function getFile(){
    
    
   const file = document.querySelector('#test').files[0];
   const reader = new FileReader();
   console.log("readyState = ", reader.readyState)
   reader.onloadstart = ()=>{
    
     console.log("onloadstart readyState = ", reader.readyState) }
   reader.onprogress = ()=>{
    
     console.log("onprogress readyState = ", reader.readyState) }
   reader.onload = ()=>{
    
     console.log("onload readyState = ", reader.readyState) }
   reader.onloadend = ()=>{
    
     console.log("onloadend readyState = ", reader.readyState) }
   reader.readAsDataURL(file);
}

Resultado de salida:

método

método	Descripción
abortar	Cancele la operación de lectura de FileReader, después de que se complete la activación de readyState (DONE)
readAsArrayBuffer	Leer blob o archivo como objeto ArrayBuffer
readAsBinaryString	Leer blob o archivo en el formato binario original del archivo
readAsDataURL	Leer blob o archivo como una cadena en los datos: formato URL (codificación base64)
readAsText	Leer blob o archivo como contenido (forma de cadena)

readAsArrayBuffer, readAsBinaryString, readAsDataURL, readAsTextMétodos Cuatro son:

• Recibir objeto Blob o Archivo
• Cuando se completa la lectura, readyState se convierte en DONE (completado)
• Activar evento de final de carga
• Leer el resultado en el atributo de resultado

¿Cuáles son los resultados de lectura de estos cuatro métodos? Preparé un test.txt (con texto falso) y un test.png para probar, y los resultados de salida son los siguientes:

readAsArrayBuffer

readAsBinaryString

readAsDataURL

readAsText

Código de prueba:

<!-- Vue -->
<template>
  <div id="fileUpload">
    <h1>测试方法: {
   
   {readType}}</h1>
    <h4>
      读取txt文件：
      <input id="txt" type="file" @change="getFile('txt')" />
    </h4>
    <h4>
      读取jpg文件：
      <input id="jpg" type="file" @change="getFile('jpg')" />
    </h4>
    <div style="margin-top:20px;">
      <button style="margin:5px;" @click="setReadType('readAsArrayBuffer')" > readAsArrayBuffer </button> 
      <button style="margin:5px;" @click="setReadType('readAsBinaryString')" > readAsBinaryString </button> 
      <button style="margin:5px;" @click="setReadType('readAsDataURL')" > readAsDataURL </button> 
      <button style="margin:5px;" @click="setReadType('readAsText')" > readAsText </button> 
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: "fileUpload",
  data() {
     
     
    return {
     
     
      readType:'readAsArrayBuffer'
    };
  },
  methods: {
     
     
    setReadType(type){
     
     
      this.readType = type;
      document.querySelector('#txt').value = '';
      document.querySelector('#jpg').value = '';
    },
    getFile(type){
     
     
      const file = document.querySelector(`#${
       
       type}`).files[0];
      const reader = new FileReader();
      reader.onload = ()=>{
     
     
        console.log(`读取.${
       
       type} 结果如下：`,reader.result);
        this[`${
       
       type}Res`] = reader.result;
      }
      reader[this.readType](file);
    }
  }
};
</script>

Enlace de referencia:
MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader