base64、File、Blob、ArrayBuffer互转

最新推荐文章于 2024-08-24 08:23:17 发布

zhouhao620

最新推荐文章于 2024-08-24 08:23:17 发布

阅读量541

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/zhouhao620/article/details/121233324

版权

这段代码展示了如何在JavaScript中进行文件和Blob对象与Base64字符串之间的转换。提供了四个主要函数：FileToBase64、blobToBase64、base64ToBlob和base64ToFile，分别用于将File对象、Blob对象转换为Base64，以及将Base64转换回Blob和File对象。此外，还包括了blob转ArrayBuffer和file转ArrayBuffer的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
    });
};

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);
    });
};

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 
    });
};

base64转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 
    });
};

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);
    });
};

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);
    });
};