vue中FileReader 的使用

目录

1 通过input 的 change 事件 获取所选文件信息

2 通过 FileReader 读取文件 

认识FileReader

3 通过filereader的onload事件，获取事件读取完成时的文件内容（base64 编码）

 4 若input选择是图片，则可以通过定义一个变量，将返回的编码赋值给img的src属性，图片便可返显在页面

1 通过input 的 change 事件 获取所选文件信息

<template>
   <input type="file" multiple @change="add" />
</template>

<script setup>

const add = e => {
  console.log('e', e)
  console.log('e', e)
}

</script>

如图选中两个文件，查看add事件，并获取e.target属性，所选文件信息通过e.target.files获取

 files是个数组，如果input不加multiple属性，当前文件的信息需要通过files[0]获取

 

 

2 通过 FileReader 读取文件 

<script setup>

const add = e => {
  console.log('e', e)
  console.log('e.target.files', e.target.files)

  const file = e.target.files[0]

  let reader = new FileReader()
  console.log('reader', reader)

  reader.readAsDataURL(file)
  reader.onload = e => {
    console.log('e----', e)
  }
}
</script>

认识FileReader

FileReader

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

其中 File 对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

属性

FileReader.error 只读

一个DOMException，表示在读取文件时发生的错误。

FileReader.readyState 只读

表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据。
LOADING	1	数据正在被加载。
DONE	2	已完成全部的读取请求。

FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。​​​​​​​

事件处理

FileReader.onabort

处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror (en-US)

处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload

处理load事件。该事件在读取操作完成时触发。

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

FileReader.readAsBinaryString() 非标准

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

3 通过filereader的onload事件，获取事件读取完成时的文件内容（base64 编码）

FileReade​​​​​​​r.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 FileReader.result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。

<script setup>

const add = e => {
  console.log('e', e)
  console.log('e.target.files', e.target.files)

  const file = e.target.files[0]

  let reader = new FileReader()
  console.log('reader', reader)

  reader.readAsDataURL(file)
  reader.onload = e => {
    console.log('e----', e)
    console.log('e.target.result', e.target.result)
  }
}
</script>

 ​

 4 若input选择是图片，则可以通过定义一个变量，将返回的编码赋值给img的src属性，图片便可返显在页面

<template>
  <div>
    <input type="file" multiple @change="add" />
    <img :src="imgSrc" alt style="width:500px" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const imgSrc = ref('')

const add = e => {
  console.log('e', e)
  console.log('e.target.files', e.target.files)

  const file = e.target.files[0]

  let reader = new FileReader()
  console.log('reader', reader)

  reader.readAsDataURL(file)
  reader.onload = e => {
    console.log('e----', e)
    console.log('e.target.result', e.target.result)

    imgSrc.value = e.target.result
  }
}
</script>

​