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

2023-12-25 21:29:25

目录

问题

如题,使用下列代码读取上传的文件:
在这里插入图片描述

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

但是通过debugconsole.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);

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

文章来源:https://blog.csdn.net/aruewds/article/details/135208648
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。