【JavaScript】FileReader读取文件成功，但存储的数据为空——总结

本文主要是介绍【JavaScript】FileReader读取文件成功，但存储的数据为空——总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

如题，使用下列代码读取上传的文件：

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);

将处理函数放在文件读取完毕后即可。

这篇关于【JavaScript】FileReader读取文件成功，但存储的数据为空——总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---