[JavaScript] 图片文件转Base64，Base64转Blob，Blob转File对象

上传图片文件
1.后端要求传file:
file->base64（压缩）->blob->file
2.后端要求传base64：
file->base64

1.文件file->base64

FileToBase64(file, callback){
	//传入file对象，得到其base64Code
	 var reader = new FileReader();//定义一个读取文件的对象
     reader.readAsDataURL(file);//FileReader对象的readAsDataURL方法可以将读取到的文件编码成 Data URL
     reader.onload = function () {
         var img = new Image();
         img.src = this.result;
	     img.onload = function () {//必须等到图片load之后才能画到canvas中
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext("2d");
			    canvas.width = img.width;
			    canvas.height = img.height; 
			    //可在此用canvas对图片进行压缩
			    ctx.drawImage(img, 0, 0, img.width, img.height);
			    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); 
			    var quality=1;
			    var base64Code= canvas.toDataURL("image/" + ext,quality);  //画布保存 base64 编码内容 
			     //quality为0-1 之间的数字，用于标识输出图片的质量，1 表示无损压缩
                 //canvas.toDataURL("image/jpg",0.7)  
			    return callback(base64Code);
			}
       }
}

//调用方法(vue)
//this.FileToBase64(file,function(base64Code){
//  console.log(base64Code)
//})

2.base64->Blob

dataURLtoBlob(dataurl) {
    // base64转blob
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

//调用方法(vue)
//this.dataURLtoBlob(base64Code)

3.Blob 转 base64

function blobToDataURL(blob, callback) {
    var fileReader = new FileReader();
    fileReader.onload = function (e) { 
    	callback(e.target.result); 
    }
    fileReader.readAsDataURL(blob);
}

//调用方法(vue)
//this.blobToDataURL(blob, function(base64Code){
//  console.log(base64Code)
//})

4.Blob->File对象

File() 构造器创建新的 File 对象实例（前两个参数为必传）

var files = new window.File([this.blob], file.name, {option})

示例

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
}); 

5.base64转File(有兼容性问题)

dataURLtoFile(dataurl,fileName) {
     // base64转File
     var arr = dataurl.split(',');
     var mime = arr[0].match(/:(.*?);/)[1];
     var bstr = atob(arr[1]);
     var n = bstr.length;
     var u8arr = new Uint8Array(n);
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new File([u8arr],fileName,{ type: mime });
 }, 

拓展 ：

//前端生成随机文件名
var date = new Date();
var formData = new FormData();
formData.append('file',dataURLtoBlob(base64Img),'IMG_'+date .getFullYear()+(date .getMonth()+1)+date .getDate()+Math.ceil(Math.random()*100)+'.jpeg');
 

//获取文件大小
getFileSize(file){
   console.log(file.size);
   if(file.size<0){
       return;
   }else{ 
       var filesize=file.size/1024/1024;
       console.log('文件大小为:'+filesize+'MB');
   }
}

参考链接：
链接1
链接2
链接3
链接4
链接5