需求:在上传文件之前,需要预览txt文件的内容,确定格式正确再上传到服务器。chrome浏览器可完美支持
通常js对于安全性的考虑是不建议进行文件的读写。
templete
<el-row>
<label>数据文件</label>
<input type="file" id="uploadFile" class="file" @change="fileChange"> //当选中一个文件,触发该方法
</el-row>
script
readFile(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e, rs) {
resolve(e.target.result);
};
});
},
fileChange() {
let file = document.getElementById("uploadFile").files[0];
let vm = this;
this.readFile(file).then(res => {
let arr = res.split(/[\n]/);
arr.forEach((item, index) => {
let arr2 = item.split("----");
let obj = {
name: arr2[0],
sex: arr2[1],
age: arr2[2]
};
vm.$set(vm.fileData, index, obj); //这里一定要用Vue.set(),不然视图不会更新
});
vm.dialog2Visible = true; //显示一个dialog里面放一个table,将this.fileData的数据与之绑定即可
});
},
txt文件模板:
注意在txt文件的每一行不要有多余的空格
张三----男----23
李四----男----22
李艳----女----20