前言:小程序是基于客户端的原因,有轻巧的优势自然就会有许多限制,例如发起网络请求但是无法使用fetch等;本节主要讲述图片文件的处理,很多情况下获取手机的文件最后官方回返回一些几乎不可读的图片文件路径地址,当然这些图片的地址是可以展示的。
- 型如:
ttfile://temp/7ee57123-76c9-4d8a-9fb7-18141f62292a-0bd162d9f2d3572c67bb3f0fca49b82e63d0c368.jpeg
- 但是很多情况下,我们需要用到 file 对象或者 Base64 ;或者上传到OSS服务器的时候,无法使用官方提供 put 的上传方案!!!
- 核心就是使用官方的
FileSystemManager.readFile
, 飞书说明链接
一、方法封装如下: getBase64ByFilePath ()
export const getBase64ByFilePath = async (filePath, size?) => {
const _filePath = await compressFile({
path: filePath, size });
return new Promise<GetBase64ByFilePathResult>((resolve, reject) => {
const fileSystemManager = tt?.getFileSystemManager();
if (!fileSystemManager) reject({
base64Url: '', success: false });
const fileType = _filePath?.split('.')?.pop();
const fileName = _filePath?.split('-')?.pop();
fileSystemManager?.readFile({
filePath: _filePath,
encoding: 'base64',
success(res) {
const base64Url = `data:image/${
fileType || 'jpeg'};base64,${
res?.data}`;
const result = {
base64Url, fileName, fileType, success: true };
resolve(result);
},
fail(res) {
console.log(`readFile fail: ${
JSON.stringify(res)}`);
const result = {
base64Url: '', fileName, fileType, success: false };
reject(result);
}
});
});
};
二、另外想了解图片压缩的,可以学习一下 compressFile(),另外对于 web 用 canvas 进行图片压缩的处理,详见 使用canvas进行图片压缩
export const compressFile = ({
path,
size = undefined,
compressThreshold = 3,
openCompress = true,
pictureQuality = 80
}) => {
return new Promise<string>(resolve => {
if (!path) return resolve(path);
let flag = openCompress;
if (size) {
const fileSize = size / 1024 / 1024;
flag = openCompress && fileSize >= compressThreshold;
}
if (flag) {
console.log('===> being compress <===');
Taro.compressImage({
src: path,
quality: pictureQuality,
success: res => {
console.log('===> success compress <===');
resolve(res?.tempFilePath || path);
},
fail: () => {
console.log('===> fail compress <===');
resolve(path);
}
});
} else {
resolve(path);
}
});
};
最后:拓展
- base64转换为file类型,类似详情 base64、file和blob用JS进行互转的方法大全
export const base64UrlToFile = (base64Url, filename) => {
const arr = base64Url.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime });
};
- 从本地相册选择图片或使用相机拍照。【详情见Taro官方文档,此处仅作记录】
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
var tempFilePaths = res.tempFilePaths
}
fail: (res) => {
}
})
- Taro将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。但是如果是用OSS 上传是使用 put 方法,那只能使用
Taro.request
发起网络请求【详情见Taro官方文档,此处仅作记录】
const uploadTask = Taro.uploadFile({
url: 'https://example.weixin.qq.com/upload',
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function (res){
var data = res.data
}
})
uploadTask.progress((res) => {
console.log('上传进度', res.progress)
console.log('已经上传的数据长度', res.totalBytesSent)
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
})
uploadTask.abort()