vue+js 读取上传的文件,并拿到读取文件后的内容
上传文件代码:<el-uploadaction=""class="upload-demo"ref="upload":on-change="handleChange":auto-upload="false":limit="1"> 点击上传</el-upload>先点击上传文件,上传以后开始读取上传的文件。注:1. handleChange函数为监听上传文件的函数2.上传以后要
·
先点击上传文件,上传以后开始读取上传的文件。
上传文件代码:
<el-upload
action=""
class="upload-demo"
ref="upload"
:on-change="handleChange"
:auto-upload="false"
:limit="1"> 点击上传
</el-upload>
注:1. handleChange函数为监听上传文件的函数
2.上传以后要操作该文件用file.raw(即:上传以后文件在file.raw里)
读取文件代码:
handleChange(file) {
let reader = new FileReader(); //先new 一个读文件的对象 FileReader
if (typeof FileReader === "undefined") { //用来判断你的浏览器是否支持 FileReader
this.$message({
type: "info",
message: "您的浏览器不支持文件读取。"
});
return;
}
// reader.readAsText(file.raw, "gb2312"); //读.txt文件
reader.readAsArrayBuffer(file.raw); //读任意文件
reader.onload = function (e) {
var ints = new Uint8Array(e.target.result); //要使用读取的内容,所以将读取内容转化成Uint8Array
ints = ints.slice(0, 5000); //截取一段读取的内容
let snippets = new TextDecoder('gb2312').decode(ints); //二进制缓存区内容转化成中文(即也就是读取到的内容)
console.log("读取的内容如下:");
console.log(snippets);
};
},
注:1. 读取文件内容
reader.readAsArrayBuffer(file.raw);
将读取结果 封装成 ArrayBuffer ,如果想使用一般需要转换成 Uint8Array或DataView
2. 解决读取的中文是乱码
let snippets = new TextDecoder(‘gb2312’).decode(ints);
这句代码主要用来将读取的中文内容进行转化,不然读取的中文是乱码
更多推荐
已为社区贡献2条内容
所有评论(0)