vue圖片file、base64與blob之間相互轉(zhuǎn)換過程
更新時(shí)間:2025年12月17日 14:17:37 作者:梨花不負(fù)韶
文章總結(jié)了Vue中圖片的file、base64與blob的相互轉(zhuǎn)換方法,包括file轉(zhuǎn)base64、base64轉(zhuǎn)file、base64轉(zhuǎn)blob、blob轉(zhuǎn)base64、file轉(zhuǎn)blob以及blob轉(zhuǎn)file,個(gè)人經(jīng)驗(yàn)分享,希望對(duì)大家有所幫助
vue圖片file、base64與blob相互轉(zhuǎn)換
file轉(zhuǎn)base64
fileToBase64 (file) {
return new Promise((resolve, reject) => {
// 創(chuàng)建一個(gè)新的 FileReader 對(duì)象
const reader = new FileReader();
// 讀取 File 對(duì)象
reader.readAsDataURL(file);
// 加載完成后
reader.onload = function () {
// 將讀取的數(shù)據(jù)轉(zhuǎn)換為 base64 編碼的字符串
const base64String = reader.result.split(",")[1];
// 解析為 Promise 對(duì)象,并返回 base64 編碼的字符串
resolve('data:image/jpeg;base64,' + base64String);
};
// 加載失敗時(shí)
reader.onerror = function () {
reject(new Error("Failed to load file"));
};
})
}base64轉(zhuǎn)file
base64ToFile(base64Data) {
// 分割base64
const arr = base64Data.split(',');
// 獲取類型
const mime = arr[0].match(/:(.*?);/)[1];
// 解析base字符串
const bstr = window.atob(arr[1]);
const n = bstr.length;
// base64文件數(shù)據(jù)讀取
const u8arr = new Uint8Array(n);
for (let i = 0; i < n; i += 1) {
u8arr[i] = bstr.charCodeAt(i);
}
return new File([u8arr], '', { type: mime });
}base64轉(zhuǎn)blob
base64ToBlob(base64Data) {
// 分割base64
const temp = base64Data.split(',');
// 獲取類型
const mime = temp[0].match(/:(.*?);/)[1];
// 解碼使用 base-64 編碼的字符串
const raw = window.atob(temp[1]);
const rawLength = raw.length;
// base64文件數(shù)據(jù)讀取
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: mime})
}blob轉(zhuǎn)base64
blobToBase64 (blob) {
return new Promise((resolve,reject) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => {
const base64 = reader.result;
resolve(base64);
}
reader.onerror = function () {
reject(new Error("Failed to load file"));
};
})
}file轉(zhuǎn)blob
const blob = URL.createObjectURL(file)
blob轉(zhuǎn)file
const file = new File([blob], fileName, { type: fileType, lastModified: Date.now() });總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時(shí)開發(fā)的時(shí)候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue3中導(dǎo)入和使用組件幾種常見方法(.vue文件)
組件是Vue.js最強(qiáng)大的功能之一, 組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導(dǎo)入和使用組件幾種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁開發(fā)中,用戶體驗(yàn)日益成為網(wǎng)站成功的重要因素,從加載時(shí)間到SEO優(yōu)化,越來越多的開發(fā)者開始關(guān)注使用服務(wù)端渲染(SSR)來提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下
2024-11-11
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04 
