前言

同事问个关于 blob URL 的 问题

问题

简单 不就是 BLOB 转为 Base64 放在 src 上吗

当时嗯 就这样 就把 函数(函数是在某站复制的) 发过去了

等等不对 数据不就是 blobURL 吗？ 为啥还要转 base64？
也不能直接转为 base64呀！
它又不是 blob 对象 就算是 blob 对象 直接转 blob URL 不就行了

PS: 当时我负责的模块有BUG 当时确实没仔细想这个问题

果然 没过多长时间 妹子就过来 你这个方法不管用 报错
你直接 放在 src 上 不用转了

什么是 BLOB

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG图像 .png image/png、普通文本 .txt text/plain 等。

转换

FILE 转 BLOB

let file = document.querySelector('#file');
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
    let blob = new Blob([reader.result], {type: 'image/png'});
};

BLOB 转 BLOBURL

let imgUrl = window.URL.createObjectURL(blob);
console.log(imgUrl)   //imgUrl为blobUrl

BlOBURL 转 FILE

let data = {
　　name: "新年致辞.png",
　　status: "success",
　　uid: 1664334311149,
　　url: "blob:http://localhost:9528/d66ad67a-eef7-4b47-ae8b-5c35edcf2135"
};
async function getblobFile(data) {
    let file = {}
    const config = { responseType: 'blob' }
    const response = await axios.get(data.url, config)
    file = new window.File( [response.data],data.name, {  type: 'image/png' } )
    return file
}

推荐文章

谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64
https://zhuanlan.zhihu.com/p/568915443

BLOB
https://cloud.tencent.com/developer/article/1644037?from=15425

blobUrl转file、跨域图片url转base64、file转base64、blob转blobUrl、base64转file、base64转blob、file转blob
https://www.cnblogs.com/longc-box/p/16737331.html