映射函数返回一个空数组答案

【问题标题】：Map function returns an empty array映射函数返回一个空数组
【发布时间】：2019-10-31 11:37:24
【问题描述】：

我试图将 blob 转换为 base64，我找到了解决方法，但是在等待函数 displayBase64String 的结果时，submitOffre 中的 map 函数返回一个空字符串，即使 console.log 打印了一些数据.

我将不胜感激任何解决方案这是我的代码。

submitOffre = (saleData) => {
        debugger ;
        var result = base64Service.displayBase64String(saleData);
        console.log("========", result);
        const rs = result.map(value => value.file); // Doesn't work.
        console.log(rs); // rs is empty
    }
class Base64Service {

    blobToBase64 = (blob, callback) => {
        var reader = new FileReader();
        var data = '';
        reader.onload = function () {
            var dataUrl = reader.result;
            var base64 = dataUrl.split(',')[1];
            callback(base64);
        };
        reader.readAsDataURL(blob);
    }

    displayBase64String(formProps) {
        const result = [];
        const outbut = Object.entries(formProps.imageToUpload).map(([key, value]) => {
            this.blobToBase64(value, (data) => {
                result.push({ "file": `data:${value.type};base64,${data}` })
            })
        });
        return result;
    };
} 
export default new Base64Service();

【问题讨论】：

readAsDataURL 方法是异步的，这意味着其余代码在运行之前不会等待它完成。因此，您的 result.map 行在读取完成之前正在运行，这就是为什么还没有任何数据的原因。（同样，您的 displayBase64String 方法也在读取完成之前返回结果，因此它甚至会在此处返回一个空数组。）您需要等到回调运行后再尝试处理数据. （或者承诺阅读，但这是一个稍微高级一点的话题。）
我还是有点迷路，你能告诉我如何用一些代码来做吗？
在您的回调中，您只有result.push(...)。这也是您需要进行映射和记录的地方，否则您将使用尚未完成读取的数据。
我无法在那里进行映射，因为我需要将这些数据发送到服务器。
我在您提供的代码中没有看到任何地方表明您正在向服务器发送任何内容。但是为什么不能在那个回调中把它发送到服务器呢？

标签： javascript reactjs async-await base64 blob

【解决方案1】：

类似的东西可能会有所帮助：

我对你的代码做了一些修改，只是为了向你展示基本模式。

如果您一次处理超过 1 个图像，则需要使用 Promise.all 来一次跟踪超过 1 个承诺。

submitOffre = async (saleData) => { // SEE THE async KEYWORD
        debugger ;
        var result = await blobToBase64(saleData); // SEE THE await KEYWORD
        console.log("========", result);
        const rs = result.map(value => value.file); // Doesn't work.
        console.log(rs); // rs is empty
    }

我会认为您只转换了 1 张图像。

    blobToBase64 = (blob, callback) => new Promise((resolve,reject) => {
        var reader = new FileReader();
        var data = '';
        reader.onload = function () {
            var dataUrl = reader.result;
            var base64 = dataUrl.split(',')[1];
            callback(base64);
            resolve(base64);  // NOTE THE resolve() FUNCTION TO RETURN SOME VALUE TO THE await
        };
        reader.readAsDataURL(blob);
    });

【讨论】：