前端FileReader获取图片的base64

主要记录一下遇到的问题(异步)

在提交表单的时候，调用了一个函数，函数用FileReader对象的readAsDataURL方法将图片转为base64编码，以便存入数据库。

下面就是这个函数：

里面利用Promise对象的resolve和reject方法

function getBase64 (file){
        return new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = (e)=>{
                resolve(reader.result)
            }
            reader.onerror = (error) =>reject(error)
        })
    }

然后在表单提交的时候调用了这个函数，发现怎么也不能再函数外取到图片编码后的base64值。

下面这样写是调不到的：

 form.on('submit(saveSeal)',function (data) {  
                ...         
                    request.image = getBase64(myFile)
                ...
}

查阅一些资料后发现：Filereader中new Filereader.onload = function（）为异步回调函数，reader中获取到的数据无法传递到主函数外部。因为是异步，所以提交表单的时候没等getBase64这个函数执行完，直接就去赋值了，导致结果undefined。

解决方案：

async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，这样就可以取到值了。

 form.on('submit(saveSeal)',async function (data) {  
                ...         
                    request.image = await getBase64(myFile)
                ...
}