Javascript Map函数返回一个空数组

我试图将一个blob转换为base64，但在等待函数

displayBase64String

的结果时，

submitofre

中的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();

---

类似的事情可能会有所帮助：

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

如果您一次处理多个图像，则需要使用

Promise.all

，一次跟踪多个承诺

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
    }

我会将其视为您仅转换了一张图像

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

---

类似的事情可能会有所帮助：

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

如果您一次处理多个图像，则需要使用

Promise.all

，一次跟踪多个承诺

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
    }

我会将其视为您仅转换了一张图像

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

---

readAsDataURL

方法是异步的，这意味着代码的其余部分在运行之前不会等待它完成。因此，您的

result.map

行在读取之前运行，这就是为什么还没有任何数据。（同样，您的

displayBase64String

方法也会在读取之前返回结果，因此即使在读取之前，它也会返回一个空数组。）您需要等待回调运行后再尝试处理数据。（或提示阅读，但这是一个稍微高级一点的主题。）我仍然有点迷茫，你能告诉我如何使用一些代码吗？在你的回调中，你只有

结果。按（…）

。这就是您还需要进行映射和日志记录的地方，否则您将处理尚未完成读取的数据。我无法在那里进行映射，因为我需要将这些数据发送到服务器。在您提供的代码中，我没有看到您正在向服务器发送任何内容。但是为什么不能在回调中将其发送到服务器呢？

readAsDataURL

方法是异步的，这意味着代码的其余部分不会等待它运行完成。因此，您的

result.map

行在读取之前运行，这就是为什么还没有任何数据。（同样，您的

displayBase64String

方法也会在读取之前返回结果，因此即使在读取之前，它也会返回一个空数组。）您需要等待回调运行后再尝试处理数据。（或提示阅读，但这是一个稍微高级一点的主题。）我仍然有点迷茫，你能告诉我如何使用一些代码吗？在你的回调中，你只有

结果。按（…）

。这就是您还需要进行映射和日志记录的地方，否则您将处理尚未完成读取的数据。我无法在那里进行映射，因为我需要将这些数据发送到服务器。在您提供的代码中，我没有看到您正在向服务器发送任何内容。但是为什么不能在回调中发送到服务器呢？