原创

文件图片转成base64的原生JS

在项目开发或者插件开发的时候需要将文件或者图片转成base64格式编码的.

下面写了个小小的demo 可以参考一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文件图片转base64</title>
</head>
<body>
    <input type="file" multiple="multiple" id="file">
</body>
<script>
window.onload = function(){
    var file = document.getElementById('file');
    file.onchange = function(e){
        var files = e.target.files;
        if(files && files.length > 0) handleFile(files);
    }

    /**
     * 转base64
     * @param {Object} file
     * @param {Object} cb
     */
    function fileReader(file, cb) {
        if (file){
              var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (res) {
                   cb && cb(res);
            }
        }
    }

    /**
     * handleFile 处理附件
     * @param {Array} files 所有附件
     */
    function handleFile(files) {
        var fileArr = new Array(),
             formData = [];

        //将文件 的转成数组
        for(var o in files){
            //只要文件
            if(typeof files[o] === 'object'){
                fileArr.push(files[o]);
            }
        }

        //遍历
        fileArr.forEach(function(item,i,arr){
             // 获取base64
            fileReader(item, function (res) {
                  formData.push({    //基本数据
                    name: item.name,
                    size: item.size,
                    type: item.type,
                    base64: res.currentTarget.result
                })
                  if(formData.length === arr.length) imageHandle(formData);
            });
        })
    }

    /**
     * 转换完成回调
     */
    function imageHandle(imgs){
          console.log(imgs);    
    }
}
</script>
</html>

正文到此结束
阿里云主机低至1折