从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

base64、File、Blob、ArrayBuffer几种文件格式介绍以及互转_blob base64

作者：从前慢现在也慢 | 2024-02-26 08:13:18

踩

blob base64

文章目录

关系

在这里插入图片描述

介绍

Blob

在这里插入图片描述

介绍
1. 是一个不可变、原始数据的类文件对象
2. 本质上是js的对象
  1. size：包含的数据大小（字节）
  2. type：包含的数据的MIME类型
3. 里面存储的是二进制数据
4. 可以使用FileReader来读取blob中的内容

创建

// 语法
const blob = new Blob(array, options);

// 示例
const blob = new Blob([JSON.stringify(debug, null, 2)],   {type : 'application/json'});
const myBlob = new Blob([1,2,3],{type:'text/plain'});
console.log(myBlob);//Blob {size: 3, type: "text/plain"}
console.log(myBlob.size);//3
console.log(myBlob.type);//'text/plain'

1
2
3
4
5
6
7
8
9
10

File

在这里插入图片描述

介绍
1. File对象是特殊的Blob
2. 实例化有3个参数：new File(array, name, options)
3. 一般通过上传获取File对象
  1. 通过input type=file选择文件，返回fileList对象
  2. 拖拽文件生成DataTransfer对象

创建

const file = new File([file], file.name, {type: file.type});

// input上传
<input type="file" id="file">
<script>
    let obj = document.querySelector('#file')
    obj.addEventListener('change', (event) => {
        console.log(event.target.files[0]);
    })
</script>

// 拖拽
<div class="drop" style="background-color: pink; height: 50px;"></div>
<script>
    let obj = document.querySelector('.drop')
    obj.ondragover = e => {e.preventDefault()}
    obj.ondrop = e => {
        e.preventDefault()
        console.log(e.dataTransfer.files);
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

FileReader

是js的内置方法，帮助实现读取File/Blob的对象内容

readAsArrayBuffer(file) 异步按字节读取文件内容，完成之后，result属性中保存被读文件的ArrayBuffer数据对象。
readAsBinaryString(file): 异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file) 异步读取文件内容，结果用data:url的字符串形式表示。
readAsText(file) 异步按字符读取文件内容，result中包含的是字符串。
onabort 当读取操作被中止时调用
onerror 当读取操作发生错误时调用
onload 当读取操作成功完成时调用
onloadend 当读取操作完成时调用,不管是成功还是失败
onloadstart 当读取操作将要开始之前调用
onprogress 在读取数据过程中周期性调用
1
2
3
4
5
6
7
8
9
10

二进制数组

ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口
它们都是以数组的语法处理二进制数据，所以统称为二进制数组
二进制数组并不是真正的数组，而是类似数组的对象

它由三类对象组成

ArrayBuffer对象

代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。
TypedArray视图

共包括 9 种类型的视图，比如Uint8Array（无符号 8 位整数）数组视图, Int16Array（16 位整数）数组视图, Float32Array（32 位浮点数）数组视图等等。
DataView视图

可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号 8 位整数）、第二、三个字节是 Int16（16 位整数）、第四个字节开始是 Float32（32 位浮点数）等等，此外还可以自定义字节序。

ArrayBuffer对象

ArrayBuffer不是能直接读取所存储的内容，需要借助TypedArray对象或DataView对象来读写

URL.createObjectURL

会根据传入的参数创建一个指向该参数对象的URL
这个URL的生命周期存在于他被创建的这个文档里
一般涌来在浏览器中预览图片、音频、视频等二进制数据，无需上传至服务器

用法

<!DOCTYPE html>
<html>
  <head>
    <title>Upload Image</title>
  </head>
  <body>
    <input type="file" name="imgFile" id="imgFile" onchange="changeFile()" />
    <br />
    <img id="previewImg" src="" alt="Preview Image" />
    <script>
      function changeFile() {
        const imgFile = document.getElementById('imgFile').files[0]; // 接口需要的参数 file类型的图片
        console.log(imgFile.size);
        if (imgFile.size > 1024 * 1024 * 2) return alert('不允许超过 2 M');
        const typeArr = ['image/png', 'image/jpeg', 'image/git', 'image/jpg'];
        if (!typeArr.includes(imgFile.type)) return alert('只支持jpg，png，jpeg，gif格式');
        // 生成预览图片地址：通过js将文件信息在本地电脑内存中变成一个预览地址临时拿去使用显示
        const imgUrl = URL.createObjectURL(imgFile);
        console.log(imgUrl); // blob:null/a0972036-a4b0-4821-9a0e-b2003797cb3d
        document.getElementById('previewImg').src = imgUrl;
      }
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

base64

在这里插入图片描述

介绍
1. 是一个基于64个可打印字符来表示二进制数据的表示方法
2. 应用于需要通过被设计为文本数据的媒介进行上传储存和传输二进制数据，从而编码
转化方法（js）
1. atob()：解码
2. btoa()：编码

实际应用场景

将canvas转为base64编码格式图片

const canvas = document.getElementById('canvas'); 
const ctx = canvas.getContext("2d");
const dataUrl = canvas.toDataURL();
1
2
3

将图片、文件等转化为base64进行传输或存储

转化

file转base64

export const FileToBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => { 
            resolve(e.target.result); 
        };
        reader.onerror = () => {
            reject();
        };
        reader.readAsDataURL(file);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

blob转base64

export const blobToBase64 = (blob) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => { 
            resolve(e.target.result); 
        };
        reader.onerror = () => {
            reject();
        };
        reader.readAsDataURL(blob);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

base64转blob

export const base64ToBlob = (code) => {
    const parts = code.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;

    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { 
        "type": contentType 
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

baes64转file

export const base64ToFile = (code, fileName) => {
    const parts = code.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const fileExt = contentType.split("/")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;

    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new File([uInt8Array], `${ fileName }.${ fileExt }`, { 
        "type": contentType 
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

blob转file

export const blobToArrayBuffer = (blob) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => { 
            resolve(e.target.result); 
        };
        reader.onerror = () => {
            reject();
        };
        reader.readAsArrayBuffer(blob);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

blob转ArrayBuffer

export const blobToArrayBuffer = (blob) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => { 
            resolve(e.target.result); 
        };
        reader.onerror = () => {
            reject();
        };
        reader.readAsArrayBuffer(blob);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

file转ArrayBuffer

export const fileToArrayBuffer = (file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => { 
            resolve(e.target.result); 
        };
        reader.onerror = () => {
            reject();
        };
        reader.readAsArrayBuffer(file);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/145097?site