如题,使用下列代码读取上传的文件:
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
const fileName = files[i].name;
reader.onload = function(e) {
file_datas[fileName] = e.target.result;
}
// 根据需要设置读取模式:'text' 或 'binary'
reader.readAsText(files[i]);
}
但是通过debug
和console.log
输出的file_datas
都为空,并没有任何数据。
这时候尝试在在循环的过程中输出数据,发现是可以输出结果的。
也就是说,中间赋值的时候值是存在的,那么 有可能是变量的作用域问题或者其它。
但是变量是在函数外定义的,所以排除作用域的问题。
而真正的原因是:FileReader读取文件是异步的,所以在代码执行完但是还未读取完,所以可能出现空值的情况。
这时候将代码修改,用Promise 或 async/await 等方式来处理异步操作的结果:
function readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function(e) {
resolve(e.target.result);
};
reader.onerror = function(e) {
reject(e);
};
reader.readAsText(file);
})
}
async function handleFiles(files, engine, recommend_method, single_or_multiple, epoch, num_train, cnt_limit) {
const file_datas = {};
const promises = [];
for (let i = 0; i < files.length; i++) {
const fileName = files[i].name;
const promise = readFile(files[i])
.then(fileContent => {
file_datas[fileName] = fileContent;
})
.catch(error => console.log(error));
promises.push(promise);
}
await Promise.all(promises);
// console.log(file_datas);
// 等待文件读取完成后再发送数据
}
handleFiles(files, engine, recommend_method, single_or_multiple, epoch, num_train, cnt_limit);
将处理函数放在文件读取完毕后即可。