base64格式与 blob格式互相转换

最新推荐文章于 2024-07-31 16:45:57 发布

原创

最新推荐文章于 2024-07-31 16:45:57 发布 · 4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了如何将Blob格式的URL转换为Base64编码。通过`URL.createObjectURL()`和`FileReader.readAsDataURL()`两种方法进行比较，分析它们的执行时机、内存使用和兼容性。在获取数据URL时，`FileReader.readAsDataURL()`会返回Base64字符串，而`URL.createObjectURL()`则提供内存URL。虽然`createObjectURL`在不释放时会占用内存，但能节省性能。文章提供了一个图片上传预览的示例，展示了这两种方法的实际应用。

将blob格式url转换为base64

async beginUploadImagelfNeed(url) { // 此处参数值为blob格式url
    let file = await this.httpRequest(url)
},
    httpRequest(src){
        return new Promise((resolve, reject) =>{
            let xhr = new XMLHttpRequest();
            xhr.open('GET',src,true);
            xhr.responseType = 'blob';
            xhr.onload = function(e){
                if (this.status == 200){
                    let myBlob = this.response;
                    let files = new window.File([myBlob], myBlob.type, {type:myBlob.type}) // myBlob.type自定义文件名resolve(files)
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(files)
                    console.log(files)
                    fileReader.onload = () => {
                        console.log(fileReader.result);
                    }
                } else {
                    reject(false)
                }
            }
            xhr.