快捷導(dǎo)航

JS?圖片base64與file_blob的相互轉(zhuǎn)換的方法實(shí)現(xiàn)

更新時(shí)間：2025年07月25日 11:13:53 作者：喜歡代碼的新之助

在開發(fā)中,經(jīng)常會(huì)遇到需要將base64編碼的圖片轉(zhuǎn)換為file文件格式用于上傳的情況,下面就來介紹一下base64與file_blob的相互轉(zhuǎn)換,感興趣的可以了解一下

在開發(fā)中，經(jīng)常會(huì)遇到需要將base64編碼的圖片轉(zhuǎn)換為file文件格式用于上傳的情況；圖片base64編碼轉(zhuǎn)換為file格式過程中，思路：base64 --> Uint8Array --> new File（）。

具體實(shí)現(xiàn)方法如下，封裝在文件xxx.js中，放置于項(xiàng)目文件夾utils下，開發(fā)中直接引入調(diào)用即可：

/**
 * Base64 轉(zhuǎn) File
 * @param base64 String base64格式字符串
 * @param filename String 文件名稱或者文件路徑
 * @param contentType String file對(duì)象的文件類型，如："image/png"
 */
 export function base64ToFile(base64, filename, contentType){
     var arr = base64.split(',')  //去掉base64格式圖片的頭部
     var bstr = atob(arr[1])   //atob()方法將數(shù)據(jù)解碼
     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轉(zhuǎn)Blob
* @param base64 String base64格式字符串
* @param contentType String blob對(duì)象的文件類型，如："image/png"
*/
function base64ToBlob(base64, contentType){
	var arr = base64.split(',')  //去掉base64格式圖片的頭部
	var bstr = atob(arr[1])   //atob()方法將數(shù)據(jù)解碼
	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 )  //創(chuàng)建URL,
	blobImg.name = new Date().getTime() + '.png'
	return blobImg
}

/**
 * File 轉(zhuǎn) Base64
 * @param file Object 文件對(duì)象流
 */
 export function fileToBase64(file){
	return new Promise((resolve) => {
		var reader = new FileReader()
		reader.readAsDataURL(file)  
		//讀取后，result屬性中將包含一個(gè)data:URL格式的Base64字符串用來表示所讀取的文件
		reader.onload = function(e){
			resolve(e.target.result)
		}
     })
 }

/**
* Blob 轉(zhuǎn) Base64
* @param blob Object blob對(duì)象
*/
export function blobToBase64(blob){
	return new Promise((resolve) => {
		var reader = new FileReader()
		reader.readAsDataURL(blob)  
		//讀取后，result屬性中將包含一個(gè)data:URL格式的Base64字符串用來表示所讀取的文件
		reader.onload = function(e){
			resolve(e.target.result)
		}
     })
}

使用：引入xxx.js文件，調(diào)用方法

// 注意引入路徑不要出錯(cuò)
import { base64ToFile, base64ToBlob, fileToBase64, blobToBase64 } from '@/utils/xxx.js'

const file = base64ToFile(base64, 'picture', 'image/png')
// 輸出File對(duì)象
console.log(file)

const blob = base64ToBlob(base64, 'image/png')
// 輸出blob對(duì)象
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)
})

到此這篇關(guān)于JS 圖片base64與file_blob的相互轉(zhuǎn)換的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS 圖片base64與file_blob轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: