文件图片转base64 原生js

 狼丶宇先生   2018-09-08 12:01   622 人阅读  0 条评论


在项目开发或者插件开发的时候需要将文件或者图片转成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>

image.png



本文地址:http://hao2013.cn/?id=54
版权声明:本文为原创文章,版权归 狼丶宇先生 所有,欢迎分享本文,转载请保留出处!