JS实现将文件和base64的相互转换

痛定思痛。 2022-09-02 01:10 681阅读 0赞

> 1. JS将文件转成base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS将文件转成base64</title>
        <style></style>
    </head>
    <body>
        <input type="file" id="fielinput" />
        <script>
        
            window.onload = function () {
                // 获取文件dom
                var input = document.getElementById("fielinput");
                // 判断该浏览器是否支持FileReader
                if (typeof (FileReader) === 'undefined') {
                    console.log("你的浏览器不支持 FileReader");
                    input.setAttribute('disabled', 'disabled');
                } else {
                    // 为file添加事件监听
                    input.addEventListener('change', parseFileToBase64, false);
                }
            }
            
            // 获取文件对象并转换成base64
            function parseFileToBase64() {
                // 获取到文件对象
                var file = this.files[0];
                // 获取FileReader实例
                var reader = new FileReader();
                // 将文件加载进入
                reader.readAsDataURL(file);
                reader.onload = function (e) { 
                    // 转换完成输出该文件base64编码
                    console.log(this.result);
                }
            }
         
        </script>
    </body>
    </html>

> 2. JS将base64转成文件，并进行下载获取

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS将base64转换成文件并下载获取</title>
    <style>
    </style>
    <script>
        
        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 });
            }
     
        function downloadFile(url,name='文件默认名'){
            var a = document.createElement("a")
            a.setAttribute("href",url)
            a.setAttribute("download",name)
            a.setAttribute("target","_blank")
            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);  
            a.dispatchEvent(clickEvent);
        }
     
        function downloadFileByBase64(base64,name){
            var myBlob = dataURLtoBlob(base64)
            var myUrl = URL.createObjectURL(myBlob)
            downloadFile(myUrl,name)
        }
        
        var yourBase64 = '输入文件base64编码'
        var youFileName = '输入你的文件名'
        downloadFileByBase64(yourBase64, youFileName)
    </script>
    </head>
    <body>
    </body>
    </html>

> 如果需要将整个文件夹全部转换成base64，可以将该文件夹压缩，然后按上述方法将该压缩文件转换成base64，将该base64转成压缩文件时，注意它的名称定义，应定义成 \*\*\*.zip。同理你若转换的是txt文件，那名称定义时应定义为 \*\*\*.txt。所以你将什么类型的文件转成base64，那么你将该base64转成文件时，名称的后缀名要保持不变。