利用input的type="file"属性,和FileReader方法实现前端读取本地txt文件。
html:
<input
type="file"
class="read-local-txt-input"
id="readTxt"
accept=".txt">
</input>
js:
// 给当前上传文件button添加监听事件,一般初始化的时候就可以执行
getInputTxt() {
this.txtDom = document.getElementById('readTxt');
this.txtDom.addEventListener('change', this.updateTxt, false);
},
updateTxt(e) {
let selectedFile = document.getElementById('readTxt').files[0];
let reader = new FileReader(); // 读取TXT起重要作用的
reader.readAsText(selectedFile);
reader.onload = oFREvent => { // 读取完毕从中取值
let pointsTxt = oFREvent.target.result;
console.log('pointsTxt', pointsTxt) // 获取到的TXT文件
};
e.target.value = null;
},
// 一定要记得最后一处监听器哦
removeTxtDomListener() {
this.txtDom.removeEventListener('change', this.updateTxt, false);
}