uniapp图片转base64及JS各文件类型相互转换
1、chooseImage + request + arrayBufferToBase64
App | H5 | 微信小程序 | 快手小程序 | 京东小程序 |
---|---|---|---|---|
√ | √ | √ | √ | √ |
功能限制主要在arrayBufferToBase64
getImg() {
uni.chooseImage({
success: async (res) => {
// 等待全部完成后再接收结果
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) => {
// 避免获取不到文件类型
if (!tempFiles.type) {
uni.getImageInfo({
src: tempFiles.path,
success: (image) => {
// 把arraybuffer转成base64并拼接
resolve(`data:image/${
image.type};base64,${
uni.arrayBufferToBase64(res.data)}`)
},
fail: (err) => {
reject(err)
}
});
}
// //把arraybuffer转成base64并拼接
else resolve(`data:${
tempFiles.type};base64,${
uni.arrayBufferToBase64(res.data)}`)
},
fail: (err) => {
reject(err)
}
})
})
}
2、chooseImage + getFileSystemManager
微信小程序 | 字节跳动小程序 | 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) => {
// 避免获取不到文件类型
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实例上
getImg() {
uni.chooseImage({
success: async (res) => {
// 等待全部完成后再接收结果
let base64List = await Promise.all(res.tempFiles.map((item, index) => {
return this.tempToBase64(item)
}))
}
})
},
tempToBase64(tempFiles) {
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
const reader = new FileReader();
reader.readAsDataURL(tempFiles);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4、扩展-JS各文件类型相互转换
在 JavaScript 中的经常用到的二进制的格式有三种:
- ArrayBuffer:用来表示通用的、固定长度的原始二进制数据缓冲区;
- Blob:表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作;
- File:特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。
原生js中文件处理通常使用FileReader。
base64转换中通常会用到atob/btoa
4.1 File 转成 ArrayBuffer
function fileToArrayBuffer(file){
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.2 File 转成 blob
File特殊类型的 Blob,通常不需要转换,需要转换时可以利用 FileReader 中转。
function fileToBlob(file) {
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => resolve(new Blob([reader.result]));
reader.onerror = (error) => reject(error);
});
}
4.3 File 转成 base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.4 ArrayBuffer 转成 blob
function arrayBufferToBlob(arraybuffer) {
return new Blob([arraybuffer]);
}
4.5 ArrayBuffer 转成 File
function arrayBufferToBlob(arraybuffer, filename = 'tempArrayBuffer') {
new File([arraybuffer], filename )
}
4.6 Blob 转成 ArrayBuffer
function blobToArrayBuffer(blob) {
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
let reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
4.7 Blob 转成 File
File特殊类型的 Blob,通常不需要转换,需要转换时可以利用 FileReader 中转。
function blobToFile(blob, filename = 'tempBlob') {
return new Promise((resolve, reject) => {
///专门用来读文件的工具类
let reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = () => resolve(new File([reader.result], filename ))
reader.onerror = (error) => reject(error);
});
}
4.8 base64 转成 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 转成 File
function base64toFile(base64, filename = 'file') {
let mime = arr[0].match(/:(.*?);/)[1];
// suffix是该文件的后缀
let suffix = mime.split('/')[1];
// atob 对经过 base-64 编码的字符串进行解码
let bstr = atob(base64.split(',')[1]);
// n 是解码后的长度
let n = bstr.length;
// Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
let u8arr = new Uint8Array(n);
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
// 第三个参数是 要放到文件中的内容的 MIME 类型
return new File([u8arr], `${
filename}.${
suffix}`, {
type: mime,
});
},
4.10 base64 转成 ArrayBuffer
function base64ToArrayBuffer(base64){
let text = new TextEncoder()
return text.encode(btoa(base64))
}
文章评论