如何讓代碼在下面的async/await函數中等待？

Question

我想它上傳到服務器（與火力地堡）之前調整圖像大小：

api.uploadPhoto = async (file = {}, field = {}) => { 
    const canvas = document.getElementById('canvas') 
    const img = document.createElement('img') 
    const reader = new FileReader() 
    let fileToUpload 

    reader.onload = function (e) { 
    img.src = e.target.result 
    pica.resize(img, canvas).then(result => { 
     fileToUpload = pica.toBlob(result, 'image/jpeg', 90)) 
    }) 
    } 
    reader.readAsDataURL(file) 

    // run the code below only when reader.onload has finished 

    return await imageUpload.toFirebase(fileToUpload, field) 
} 

的問題是，在imageUpload.toFirebase之前reader.onload運行。如何解決這個問題？

Answer 1

移動上傳到回調...

api.uploadPhoto = async (file = {}, field = {}, callback) => { 
    const canvas = document.getElementById('canvas'); 
    const img = document.createElement('img'); 
    const reader = new FileReader(); 
    let fileToUpload; 

    reader.onload = function (e) { 
    img.src = e.target.result; 
    pica.resize(img, canvas).then(result => { 
     fileToUpload = pica.toBlob(result, 'image/jpeg', 90)); 
    }); 

    reader.readAsDataURL(file); 
    callback(await imageUpload.toFirebase(fileToUpload, field)); 

    } 
};