Filereader与Promise的搭配使用/JavaScript异步回调函数返回值（一）

最新推荐文章于 2023-06-06 17:09:22 发布

5coder

最新推荐文章于 2023-06-06 17:09:22 发布

阅读量3.5k

点赞数 5

分类专栏：小测试文章标签： JavaScript Filereader Promise js异步回调函数返回值

本文链接：https://blog.csdn.net/weixin_42122355/article/details/102000905

版权

小测试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Filereader与Promise的搭配使用/JavaScript异步回调函数返回值

工作中项目需求：读取用户上传的Excel文件，并将Excel转换为json数据格式，然后上传至后台数据库。

问题点：Filereader中new Filereader.onload = function（）为异步回调函数，reader中获取到的数据无法传递到主函数外部。

解决办法一：

利用Promise对象的resolve和reject方法。

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--页面内容-->
<input type="file" onchange="readfls(this.files)" id="sss">
<button id="vvv">点击上传数据（假的，在后台打印了，证明数据能获取到）</button>
<!--页面内容-->

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/xlsx.core.min.js"></script>  <!--解析Excel的js插件-->
<script>
    //文件流转换BinaryString
    function fixData(data) {
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

    //读取文件
    var ImportFile = null;

    function readfls(fls) {
        if (fls && fls.length > 0) {
            ImportFile = fls[0];
            console.log(ImportFile);
            var fileX = ImportFile.name.split(".").reverse()[0];
            var fileXyes = false;
            ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].forEach(function (value, index, array) {
                if (fileX === value) {
                    fileXyes = true;
                }
            });
            if (fileXyes) {
                file2Xce(ImportFile).then(function (t) {
                    console.log("数据解析完成了，做点什么事···");
                    if (t && t.length > 0) {
                        console.log('.then--->', t)
                    }
                });
            } else {
                alert("格式错误！请重新选择");
            }
        }
    }

    //开始将Excel文件读取为JSON数据格式
    var rABS = true;
    var wb; //读取完成的数据
    function file2Xce(f) {
        return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                if (rABS) {
                    wb = XLSX.read(btoa(fixData(data)), { //手动转化
                        type: 'base64'
                    });
                } else {
                    wb = XLSX.read(data, {
                        type: 'binary'
                    });
                }
                var data2 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                resolve(data2);
            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
        });
    }

    //点击事件，获取读取到的json
    $('#vvv').click(function () {
        var file = document.getElementById('sss');
        // console.log(file.files[0]);
        file2Xce(ImportFile).then(function (t) {
            console.log("获取到数据了，刚才点击了准备上传了");
            if (t && t.length > 0) {
                //在这里可以使用解析后的json了，想干嘛干嘛
                console.log('.vvv  click--->', t)
            }
        });
    })
</script>
</body>
</html>

配图一：

配图二：

最后：第二个方法下篇文章再记录！

5coder

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Filereader与Promise的搭配使用/JavaScript异步回调函数返回值（一）

Filereader与Promise的搭配使用/JavaScript异步回调函数返回值工作中项目需求：读取用户上传的Excel文件，并将Excel转换为json数据格式，然后上传至后台数据库。问题点：Filereader中new Filereader.onload = function（）为异步回调函数，reader中获取到的数据无法传递到主函数外部。解决办法一：利用Promise...
复制链接

扫一扫