将上传的文件进行base64转码，并转换为JSON数据格式_文件base后后端解析成json无法生成文件-CSDN博客

本文链接：https://blog.csdn.net/wang_jun8072/article/details/102724459

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <!-- multiple属性规定文件上传可以多选 -->
    <input type="file" name="file" id="file" multiple>
    <pre>
        将上传的文件进行base64转码，并转换为JSON数据格式
        （注意异步的问题）
    </pre>
    <script>
        $("#file").change(function(){
        
            // 存放文件的数组，用于将对象中的每一个文件存储并过滤无用属性
            var arr = [];
            
            //开始过滤
            for(let i = 0;i<$(this)[0].files.length;i++){
                arr.push($(this)[0].files[i]);
            }
            
            //回调写法
            var arr2 = [];
            arr.forEach((val,index)=>{
                let reader = new FileReader();
                reader.readAsDataURL(val);
                reader.onload = function(e){
                    arr2.push(e.target.result);
                    //当arr数组的元素个数与arr2数组的元素个数相等时证明已经全部转换完成
                    if(arr2.length == arr.length){
                        console.log(JSON.stringify({files:arr2}));
                    }else{
                        console.log("不行");
                    }
                }
            })

            //由于会产生异步所以使用promise来限制回调
            var p = new Promise(function(resolve,reject){
                var arr2 = [];
                arr.forEach((val,index)=>{
                    let reader = new FileReader();
                    reader.readAsDataURL(val);
                    reader.onload = function(e){
                        arr2.push(e.target.result);
                        //当arr数组的元素个数与arr2数组的元素个数相等时证明已经全部转换完成
                        if(arr2.length == arr.length){
                            resolve(arr2);
                        }
                    }
                })
            })
            
            //base64转换完成时执行，将整个res（arr2）转换为JSON字符串
            p.then(function(res){
                console.log(JSON.stringify({files:res}));
            },function(error){

            })
        })
    </script>
</body>
</html>