1、chooseImage + request + arrayBufferToBase64
| App | H5 | 微信小程序 | 快手小程序 | 京東小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
功能限制主要在arrayBufferToBase64
getImg() {
uni.chooseImage({
success: async (res) => {
// 等待全部完成后再接收結(jié)果
let base64List = await Promise.all(res.tempFiles.map((item, index) => {
return this.tempToBase64(item)
}))
}
})
},
tempToBase64(tempFiles) {
return new Promise((resolve, reject) => {
wx.request({
url: tempFiles.path,
responseType: 'arraybuffer',
success: (res) => {
// 避免獲取不到文件類(lèi)型
if (!tempFiles.type) {
uni.getImageInfo({
src: tempFiles.path,
success: (image) => {
// 把a(bǔ)rraybuffer轉(zhuǎn)成base64并拼接
resolve(`data:image/${image.type};base64,${uni.arrayBufferToBase64(res.data)}`)
},
fail: (err) => {
reject(err)
}
});
}
// //把a(bǔ)rraybuffer轉(zhuǎn)成base64并拼接
else resolve(`data:${tempFiles.type};base64,${uni.arrayBufferToBase64(res.data)}`)
},
fail: (err) => {
reject(err)
}
})
})
}
2、chooseImage + getFileSystemManager
| 微信小程序 | 字節(jié)跳動(dòng)小程序 | QQ小程序 |
|---|---|---|
| √ | √ | √ |
功能限制主要在getFileSystemManager
getImg() {
uni.chooseImage({
success: async (res) => {
let base64List = await Promise.all(res.tempFiles.map((item, index) => {
return this.tempToBase64(item)
}))
console.log(base64List)
}
})
},
tempToBase64(tempFiles) {
return new Promise((resolve, reject) => {
uni.getFileSystemManager().readFile({
filePath: tempFiles.path,
encoding: 'base64',
success: (res) => {
// 避免獲取不到文件類(lèi)型
if (!tempFiles.type) {
uni.getImageInfo({
src: tempFiles.path,
success: (image) => {
// 拼接成完整的base64
resolve(`data:image/${image.type};base64,${res.data}`)
},
fail: (err) => {
reject(err)
}
});
}
// 拼接成完整的base64
else resolve(`data:${tempFiles.type};base64,${res.data}`)
},
fail: (err) => {
reject(err)
}
})
})
}
3、chooseImage + FileReader
| H5 |
|---|
| √ |
功能限制主要在FileReader實(shí)例上
getImg() {
uni.chooseImage({
success: async (res) => {
// 等待全部完成后再接收結(jié)果
let base64List = await Promise.all(res.tempFiles.map((item, index) => {
return this.tempToBase64(item)
}))
}
})
},
tempToBase64(tempFiles) {
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
const reader = new FileReader();
reader.readAsDataURL(tempFiles);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4、擴(kuò)展-JS各文件類(lèi)型相互轉(zhuǎn)換
在 JavaScript 中的經(jīng)常用到的二進(jìn)制的格式有三種：
- ArrayBuffer：用來(lái)表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)；
- Blob：表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作；
- File：特殊類(lèi)型的 Blob，且可以用在任意的 Blob 類(lèi)型的 context 中。
原生js中文件處理通常使用FileReader。
- FileReader對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶(hù)計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容。
base64轉(zhuǎn)換中通常會(huì)用到atob/btoa
- atob對(duì)經(jīng)過(guò) base-64 編碼的字符串進(jìn)行解碼。
- btoa可以將一個(gè)二進(jìn)制字符串編碼為 Base64 編碼的 ASCII 字符串。
4.1 File 轉(zhuǎn)成 ArrayBuffer
function fileToArrayBuffer(file){
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.2 File 轉(zhuǎn)成 blob
File特殊類(lèi)型的 Blob，通常不需要轉(zhuǎn)換，需要轉(zhuǎn)換時(shí)可以利用 FileReader 中轉(zhuǎn)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-482750.html
function fileToBlob(file) {
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => resolve(new Blob([reader.result]));
reader.onerror = (error) => reject(error);
});
}
4.3 File 轉(zhuǎn)成 base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.4 ArrayBuffer 轉(zhuǎn)成 blob
function arrayBufferToBlob(arraybuffer) {
return new Blob([arraybuffer]);
}
4.5 ArrayBuffer 轉(zhuǎn)成 File
function arrayBufferToBlob(arraybuffer, filename = 'tempArrayBuffer') {
new File([arraybuffer], filename )
}
4.6 Blob 轉(zhuǎn)成 ArrayBuffer
function blobToArrayBuffer(blob) {
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
let reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.7 Blob 轉(zhuǎn)成 File
File特殊類(lèi)型的 Blob，通常不需要轉(zhuǎn)換，需要轉(zhuǎn)換時(shí)可以利用 FileReader 中轉(zhuǎn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-482750.html
function blobToFile(blob, filename = 'tempBlob') {
return new Promise((resolve, reject) => {
///專(zhuān)門(mén)用來(lái)讀文件的工具類(lèi)
let reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => resolve(new File([reader.result], filename ))
reader.onerror = (error) => reject(error);
});
}
4.8 base64 轉(zhuǎn)成 Blob
function base64toBlob(base64) {
let arr = base64.split(',');
let bstr = atob(arr[1]);
let n = bstr.length;;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: arr[0].match(/:(.*?);/)[1]
});
},
4.9 base64 轉(zhuǎn)成 File
function base64toFile(base64, filename = 'file') {
let mime = arr[0].match(/:(.*?);/)[1];
// suffix是該文件的后綴
let suffix = mime.split('/')[1];
// atob 對(duì)經(jīng)過(guò) base-64 編碼的字符串進(jìn)行解碼
let bstr = atob(base64.split(',')[1]);
// n 是解碼后的長(zhǎng)度
let n = bstr.length;
// Uint8Array 數(shù)組類(lèi)型表示一個(gè) 8 位無(wú)符號(hào)整型數(shù)組 初始值都是 數(shù)子0
let u8arr = new Uint8Array(n);
// charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個(gè)返回值是 0 - 65535 之間的整數(shù)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// new File返回File對(duì)象 第一個(gè)參數(shù)是 ArraryBuffer 或 Bolb 或Arrary 第二個(gè)參數(shù)是文件名
// 第三個(gè)參數(shù)是 要放到文件中的內(nèi)容的 MIME 類(lèi)型
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},
4.10 base64 轉(zhuǎn)成 ArrayBuffer
function base64ToArrayBuffer(base64){
let text = new TextEncoder()
return text.encode(btoa(base64))
}
到了這里，關(guān)于uniapp圖片轉(zhuǎn)base64及JS各文件類(lèi)型相互轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
