JS 图片base64与file_blob的相互转换的方法实现
作者：喜欢代码的新之助
在开发中,经常会遇到需要将base64编码的图片转换为file文件格式用于上传的情况,下面就来介绍一下base64与file_blob的相互转换,感兴趣的可以了解一下
在开发中，经常会遇到需要将base64编码的图片转换为file文件格式用于上传的情况；图片base64编码转换为file格式过程中，思路：base64 --> Uint8Array --> new File（）。
具体实现方法如下，封装在文件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)
}
})
}
使用：引入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)
})
到此这篇关于JS 图片base64与file_blob的相互转换的方法实现的文章就介绍到这了,更多相关JS 图片base64与file_blob转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！