目录

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状态的数字。取值如下:

常量名描述
EMPTY0还没有加载任何数据。
LOADING1数据正在被加载。
DONE2已完成全部的读取请求。

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>

Logo

前往低代码交流专区

更多推荐