FileReader之获取文本文件内容为字符串
FileReader官网描述:
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
其中 File 对象可以是来自用户在一个<input>
元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
重要提示:FileReader 仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件,应使用标准 Ajax 解决方案进行服务器端文件读取,如果读取跨域,则使用 CORS 权限。
直接使用:
<template>
<input ref="fileInput" type="file" style="display: none" @change="fileUpload" />
<button @click="uploadClick">点击上传</button>
</template>
// ts部分
uploadClick() {
(this.$refs.fileInput as HTMLInputElement).click()
}
fileUpload() {
const file = (this.$refs.fileInput as HTMLInputElement).files[0]
(this.$refs.file as HTMLInputElement).value = '' // 必须重置,否则上传相同文件时不会触发change事件
const fileReader = new FileReader();
fileReader.onload = (e: any) => {
console.log(e.target.result) // 文件文本字符串
}
fileReader.readAsText(file);
}
标签:文件,读取,FileReader,refs,文本文件,fileReader,字符串,HTMLInputElement
From: https://www.cnblogs.com/my-wl/p/16915406.html