Question

我的应用程序从Highcharts生成缩略图以在UI上显示。每次刷新页面时，缩略图的顺序都会改变。

经过一番调查后，我发现data每次都是一个不同的缓冲区值（甚至之前我将它传递给base64转换函数），这导致我的fileImageArray每次都以不同的顺序。

我每次都将正确的files[i]传递给readFile，这不是错误。

这是我阅读文件的功能：

function getFiles(callback) {
    var filesNameArray = [], fileImageArray = [], base64 = "";
    fs.readdir(graphDir, function(err, files) {
        if (err) {
            console.log(err);
        } else {
            for (var i in files) {
                filesNameArray.push(files[i].substr(0, files[i].indexOf(".")));
                fs.readFile(graphDir + files[i], function(err, data) {
                    if (err) {
                        console.log(err);
                    } else {
                        base64 = 'data:image/png;base64,' + conversions.bufferToBase64(data);
                        fileImageArray.push(base64);
                    }
                });
            }
            callback(filesNameArray, fileImageArray);
        }
    });
}

任何帮助表示感谢。

Answer 1

这看起来是节点fs实施的已知问题。 https://github.com/nodejs/node/issues/3232

如果您能负担得起阻止IO，我建议您尝试fs.readdirSync。或者像这样对回调中的文件数组进行排序。

fs.readdir(graphDir, function(err, files) {
    if (err) {
        console.log(err);
    } else {

        // sort files
        files = files.sort(function(a, b) {
            return a < b ? -1 : 1;
        });

        for (var i in files) {
            filesNameArray.push(files[i].substr(0, files[i].indexOf(".")));
            fs.readFile(graphDir + files[i], function(err, data) {
                if (err) {
                    console.log(err);
                } else {
                    base64 = 'data:image/png;base64,' + conversions.bufferToBase64(data);
                    fileImageArray.push(base64);
                }
            });
        }
        callback(filesNameArray, fileImageArray);
    }
});

我还建议您将for循环切换为.forEach以优化行为。

readFile每次都返回不同的Buffer值

1 个答案: