目录
1 通过input 的 change 事件 获取所选文件信息
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上执行
FileReader.error 只读mozGetAsFile()
方法后返回结果。一个DOMException,表示在读取文件时发生的错误。
FileReader.readyState 只读表示
FileReader
状态的数字。取值如下:
常量名 值 描述 EMPTY
0
还没有加载任何数据。 LOADING
1
数据正在被加载。 DONE
2
已完成全部的读取请求。
FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。
事件处理
处理abort事件。该事件在读取操作被中断时触发。
处理error事件。该事件在读取操作发生错误时触发。
处理load事件。该事件在读取操作完成时触发。
中止读取操作。在返回时,
readyState
属性为DONE
。FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容,一旦完成,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
FileReader.readAsBinaryString() 非标准
开始读取指定的Blob中的内容。一旦完成,
result
属性中将包含所读取文件的原始二进制数据。开始读取指定的Blob中的内容。一旦完成,
result
属性中将包含一个data:
URL 格式的 Base64 字符串以表示所读取文件的内容。开始读取指定的Blob中的内容。一旦完成,
result
属性中将包含一个字符串以表示所读取的文件内容。
3 通过filereader的onload事件,获取事件读取完成时的文件内容(base64 编码)
FileReader.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>