VUE + ElementUI浏览器本地导入解析文本文件(不上传至服务器)
VUE + ElementUI浏览器本地导入解析文本文件内容(不上传至服务器)。<input type="file"><el-upload>
·
VUE + ElementUI浏览器本地导入解析文本文件内容(不上传至服务器)。
示例代码:
<template>
<div>
<div class="in-file">
<input type="file" @change="inFile" multiple="multiple" accept="*/*" />
</div>
<!-- ElementUI上传 -->
<el-upload
:auto-upload="false"
:on-change="elInFile"
ref="upload"
class="upload-demo"
accept="*/*">
<el-button slot="trigger" size="mini" type="success" plain>选取文件</el-button>
<i slot="tip" class="el-upload__tip el-icon-info">请选取文本文件</i>
</el-upload>
</div>
</template>
<script>
export default {
name: 'importTxt',
data() {
return {
files: null //文件列表
};
},
methods: {
/**
* input-file调用此函数时,默认传入"$event"
* @param e {@link Object}:$event事件对象;
*/
inFile(e) {
this.files = (e.target || e.srcElement).files; //获取"input-file"的FileList对象
if (!this.files || !this.files.length)
return;
for (let i = 0, len = this.files.length; i < len; i++)
this.read(this.files[i]);
},
/**
* 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用。
* @param f {@link Object}:当前上传的文件;
* @param fs {@link Array}:当前文件列表;
*/
elInFile(f, fs) {
this.read(f.raw);
},
/**
* 解析
* @param f {@link File}
*/
read(f) {
let rd = new FileReader();
rd.onload = e => { //this.readAsArrayBuffer函数内,会回调this.onload函数。在这里处理结果
let cont = rd.reading({encode: 'GBK'});
console.log('文件内容:', cont);
};
rd.readAsBinaryString(f);
}
},
beforeCreate() {
/**
* 读取文件(自定义函数)
* @param pms {@link Object}:参数:
* @param pms.encode {@link String}:编码格式:
* @return {@link String}:文本内容;
*/
FileReader.prototype.reading = function ({encode} = pms) {
let bytes = new Uint8Array(this.result); //无符号整型数组
let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
return text;
};
/* 重写readAsBinaryString函数 */
FileReader.prototype.readAsBinaryString = function (f) {
if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
this.onload = e => { //在this.onload函数中,完成公共处理
let rs = this.reading();
console.log(rs);
};
this.readAsArrayBuffer(f); //内部会回调this.onload方法
};
}
}
</script>
<style scoped>
.in-file {
text-align: center;
}
</style>
注:重写readAsBinaryString函数中的 this.onload 公共处理方法,在methods的read函数中,被重新覆盖。
更多推荐
已为社区贡献2条内容
所有评论(0)