Question

我试图将blob转换为base64，但我发现了解决方法，但是在等待函数displayBase64String的结果时，submitOffre中的map函数即使控制台也会返回一个空字符串。日志会打印一些数据。

我将不胜感激这是我的代码。

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

Answer 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
    }

我将视同您仅转换一张图像。

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

Map函数返回一个空数组

1 个答案: