图片的及时预览(转base64编码)

传统的上传图片方式是

用户上传=>服务器存储=>服务器返回url=>浏览器请求图片资源=>浏览器渲染

流程没有问题，但是如果在网络状况不是很好的情况下用户体验可能会变差，又或者需要用户先对图片进行裁剪时如果直接上传图片也会给服务器造成不必要的压力，这时候就可以提前在浏览器就先将图片渲染出来或者进行预处理，这时候就需要用到这个方法了。

//fileChange 由input标签change事件触发
const fileChange = (e) => {
    toBase64(e.target.files[0]).then(res => {
    	// base64即图片的src，动态绑定到img上即可
        base64.value = res
    })
}
// 定义一个名为 toBase64 的函数，该函数接收一个参数 file，这个参数是一个文件对象。
const toBase64 = (file) => {
    // 返回一个新的 Promise 对象。Promise 对象用于异步编程，表示一个最终可能完成 (解析) 或失败 (拒绝) 的值。
    return new Promise((resolve, reject) => {
    	// 在这里可以进行图片格式/文件大小等进行限制
        if(file.type!=='image/png' && file.type !== 'image/jpeg'){
            reject("file must be 'jpg' or 'png' file")
        }
        // 创建一个 FileReader 对象，用于读取文件内容。
        const reader = new FileReader()
        // 调用 readAsDataURL 方法将文件读取为 data URL，也就是 Base64 编码的字符串。这是一个异步操作。
        reader.readAsDataURL(file)
        // 当文件读取完成时，执行以下回调函数。
        reader.onload = () => {
            // 使用 resolve 函数将 reader.result（即读取到的 Base64 编码的字符串）返回给调用者。这标志着 Promise 的完成。
            resolve(reader.result)
        }
        // 如果在读取过程中发生错误，执行以下回调函数。
        reader.onerror = (error) => {
            // 使用 reject 函数将错误信息返回给调用者。这标志着 Promise 的失败。
            reject(error)
        }
    })
}