JS 图片base64与file/blob的相互转换

图片base64与file/blob的相互转换

1. 在开发中，经常会遇到需要将base64编码的图片转换为file文件格式用于上传的情况；图片base64编码转换为file格式过程中，思路：base64 --> Uint8Array --> new File（）。

2. 具体实现方法如下，封装在文件xxx.js中，放置于项目文件夹utils下，开发中直接引入调用即可：

   /**
    * Base64 转 File
    * @param base64 String base64格式字符串
    * @param filename String 文件名称或者文件路径
    * @param contentType String file对象的文件类型，如："image/png"
    */
    export function base64ToFile(base64, filename, contentType){
        var arr = base64.split(',')  //去掉base64格式图片的头部
        var bstr = atob(arr[1])   //atob()方法将数据解码
        var leng = bstr.length
        var u8arr = new Uint8Array(leng)
        while(leng--){
           u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
        }
        return new File([u8arr], filename, {type:contentType}) 
    }
   
   /**
   * Base64转Blob
   * @param base64 String base64格式字符串
   * @param contentType String blob对象的文件类型，如："image/png"
   */
   function base64ToBlob(base64, contentType){
   	var arr = base64.split(',')  //去掉base64格式图片的头部
   	var bstr = atob(arr[1])   //atob()方法将数据解码
   	var leng = bstr.length
   	var u8arr = new Uint8Array(leng)
   	while(leng--){
   		u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
   	}
   	var blob = new Blob([u8arr],{type:contentType})
   	var blobImg = {}
   	blobImg.url = URL.createObjectURL(blob )  //创建URL,
   	blobImg.name = new Date().getTime() + '.png'
   	return blobImg
   }
   
   /**
    * File 转 Base64
    * @param file Object 文件对象流
    */
    export function fileToBase64(file){
   	return new Promise((resolve) => {
   		var reader = new FileReader()
   		reader.readAsDataURL(file)  
   		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
   		reader.onload = function(e){
   			resolve(e.target.result)
   		}
        })
    }
   
   /**
   * Blob 转 Base64
   * @param blob Object blob对象
   */
   export function blobToBase64(blob){
   	return new Promise((resolve) => {
   		var reader = new FileReader()
   		reader.readAsDataURL(blob)  
   		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
   		reader.onload = function(e){
   			resolve(e.target.result)
   		}
        })
   }
   
   

3. 使用：引入xxx.js文件，调用方法

   // 注意引入路径不要出错
   import { base64ToFile, base64ToBlob, fileToBase64, blobToBase64 } from '@/utils/xxx.js'
   
   const file = base64ToFile(base64, 'picture', 'image/png')
   // 输出File对象
   console.log(file)
   
   const blob = base64ToBlob(base64, 'image/png')
   // 输出blob对象
   console.log(blob)
   
   fileToBase64(file).then(res => {
   	// 输出图片base64
   	console.log(res)
   }).catch(err => {
   	console.log(err)
   })
   
   blobToBase64(blob).then(res => {
   	// 输出图片base64
   	console.log(res)
   }).catch(err => {
   	console.log(err)
   })