上传表格 readExcel 方法中赋予的值 在方法外拿不富裕的值到问题如何解决 例如如下方法:
// 上传表格
readExcel() {
// 清空
// this.delbtn()
// this.sheetData = []
let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
// 获取文件名
this.fileName = []
this.fileName = file.name;
console.log('上传的文件名为:', this.fileName);
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (event) {
let data = new Uint8Array(reader.result);
let workbook = XLSX.read(data, { type: 'array' });
let sheet = workbook.Sheets[workbook.SheetNames[0]];
this.sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
console.log(this.sheetData); //此处打印 可以 this.sheetData 的值
}
console.log(this.sheetData); //此处打印 不出 this.sheetData 的值
},
解决方法如下:
在JavaScript中,this关键字的值取决于调用函数的方式和上下文环境。在上述代码中,this.sheetData的值被赋予在回调函数中的this上,而不是readExcel方法本身的this。在JavaScript中,函数会创建一个新的作用域,在这个作用域中,this关键字将会指向当前执行上下文的对象。在这种情况下,this指向了reader.onload函数的对象,而不是readExcel方法的对象。为了在readExcel方法外部访问this.sheetData,可以将this存储在一个变量中,并在回调函数中使用该变量来访问它,例如:
readExcel() {
let vm = this; // 存储this
// 清空
// this.delbtn()
// this.sheetData = []
let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
// 获取文件名
this.fileName = []
this.fileName = file.name;
console.log('上传的文件名为:', this.fileName);
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (event) {
let data = new Uint8Array(reader.result);
let workbook = XLSX.read(data, { type: 'array' });
let sheet = workbook.Sheets[workbook.SheetNames[0]];
vm.sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); // 使用vm来访问this.sheetData
console.log(vm.sheetData,'--------77777');
}
},
在上述代码中,vm变量存储了this,并在回调函数中使用vm.sheetData来访问readExcel方法中的this.sheetData。