前端所使用的二进制

哆来A梦没有口袋

已于 2023-04-19 15:52:13 修改

阅读量1.9k

点赞数 1

分类专栏：一天一个小知识文章标签：前端二进制文件图片回显 blob是什么 blob怎么用 input回显图片

于 2022-04-19 11:46:52 首次发布

本文链接：https://blog.csdn.net/qq_42625428/article/details/123185568

版权

一天一个小知识专栏收录该内容

15 篇文章 2 订阅

订阅专栏

前端其实在很多时候涉及到了二进制流的概念，仔细思考一下文件的上传下载，图片的上传回显，blob,arrayBuffer,fileList,file,base64是不是都感觉听过但是从来没有仔细去想过其中的区别。下面将介绍这些是什么，怎么用？

1.blob,FileList,File

文件上传是前端常用的功能，在进行功能之前先了解几个概念（别被这几个专业名次吓退，仔细看完会发现很简单哦）

blob

MDN关于blob的解释 - Blob - Web API 接口参考 | MDN

blob是类文件对象，不一定是JavaScript的原生数据格式,取名来源于SQL数据库，表示二进制大对象。在前端blob是专门用于支持文件的二进制对象（使用读取，不是操作修改，数据不可变）

FileList

MDN关于FileList的解释 -FileList - Web APIs | MDN

FileList就是用input框选中上传文件，返回的文件列表

File

MDN关于file的解释 - https://developer.mozilla.org/en-US/docs/Web/API/File

file对象是FileList中的某个个文件对象

file是继承了blob并扩展为支持用户系统的文件(File对象是特殊类型的blob)

选择文件

还记得怎么使用原生上传文件嘛？上传文件的格式是什么？

首先打印输出，看一下在我们眼里的文件是什么样子

<body>
    <div id="test">
        <input type="file" id="file">
    </div>
    <script>
        let fileDom = document.getElementById('file');
        fileDom.addEventListener('change', function(e) {
           console.log(fileDom.files)
           console.log(fileDom.files[0].arrayBuffer())
        })
    </script>
</body>

看一下输出

打印输出验证了前面的概念

input的拿到的数据是FileList文件对象，而里面是每一个文件对象File,要看见文件，利用arrayBuffer()查看

文件上传说完，我们通过图片上传回显看一下相互的转换

    <input type="file" id="file">
    <div id="imgbox"></div>
    <script>  
        document.getElementById('file').onchange = function(e) {
            document.getElementById('imgbox').innerHTML = `<img src=${URL.createObjectURL(e.target.files[0])}>`       
        }
    </script>

打开控制台看一下

获取到的file对象想在图片中显示，可以利用URL.createObjectURL(blob)进行转换为img标签可以解析的地址，可以看到地址的开头blob:// src除了能解析blob还可以解析base64,那什么是base64呢？

base64

Base64 - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

src可以解析base64,常见的就是blob转base64, base64转blob

    <input type="file" id="file">
    <div id="imgbox"></div>
    <script>  
        //blob转base64
        function blobToDataURL(blob) {
            return new Promise((reslove, reject)=> {
                var reader = new FileReader();
                reader.readAsDataURL(blob); // 读取文件
                reader.onload = function (e) {
                    reslove(e.target.result)
                }
            })
            
        }

        document.getElementById('file').onchange = function(e) {
            blobToDataURL(e.target.files[0]).then(res => {
                document.getElementById('imgbox').innerHTML = `<img src=${res}>`
            })
            
        }
    </script>

blob转base64

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

通过file.fileList可以获取到blob数据，blob数据就是一种可以存储大量二进制数据的js的一种对象类型，关于blob的属性和方法这里暂不做任何介绍，想了解的可以去mdn上查看

细心的同学可能发现了上面在转换中使用了一个fileReader函数，FileReader是可以异步读取计算机上的存储文件，这里也不做介绍，因为mdn写的也非常详细，有兴趣的可以自己去阅读了解

blob除了图片回显还可以进行文件的下载

let blob = new Blob(['我是文件'])
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.download = '文件.text';
a.href = url;
document.body.appendChild(a);
a.click();
a.remove();

下面用一张图来总结上面的知识点