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

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