其实就是使用 FileReader对象,h5提供的异步api,可以读取文件中的数据。
<input @change="uploadCode($event)" type="file" id="fileInput">
// 导出
uploadCode(event) {
//此处校验文件后缀
let file = event.target.files[0].name; // (利用console.log输出看file文件对象)json
let num = file.split('.');
let mun = num[num.length - 1];
if (mun === 'yml') {
let _that = this;
const selectedFile = event.target.files[0]
// 读取文件名
const name = selectedFile.name
// 读取文件大小
const size = selectedFile.size
// FileReader对象,h5提供的异步api,可以读取文件中的数据。
const reader = new FileReader()
// readAsText是个异步操作,只有等到onload时才能显示数据。
reader.readAsText(selectedFile)
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可,此处this指向reader,_that指向vue data,this.result就是文件的内容
_that.coder.setValue(this.result)
}
} else {
this.$message({
message: '请重新点击选择文件传入符合标准的文件',
type: 'warning'
});
}
}