微信H5不支持multiple多文件上传 (兼容安卓/ios)
使用 wx.chooseImage 上传拿到文件id (localId),再把文件id转为file文件,然后正常上传即可。微信公H5 使用input 多图上传的功能 , 安卓手机上只能一次上传一张图片。
·
问题背景
微信公H5 使用input 多图上传的功能 , 安卓手机上只能一次上传一张图片
解决方案
使用 wx.chooseImage 上传拿到文件id (localId),再把文件id转为file文件,然后正常上传即可
以下代码已经过多台安卓/ios手机测试,上传正常
// demo.tsx
import { wxChooseImage } from './upload';
<Button
type='primary'
onClick={() => {
wxChooseImage().then((res) => {
console.log(res);
// res: ['http:xxx.jpg', http:yyy.jpg, ...]
});
}}>
上传
</Button>;
// upload.ts
export function wxChooseImage() {
return new Promise<File[]>((resolve, reject) => {
wx.ready(() => {
const rejectFn = (err: any) => {
reject(err);
};
wx.chooseImage({
count: 9,
sizeType: ['original'],
sourceType: ['album'],
fail: rejectFn,
success: function (res: { localIds: any }) {
const localIds = res.localIds || [];
if (localIds.length === 0) return;
const resoveFn = (localId: string = localIds[0]): Promise<File[]> => {
return new Promise((resolve) => {
const fileArr = [];
const getLocalImgData = (localId: string) => {
wx.getLocalImgData({
localId,
success: async function (res: { localData: any }) {
let baseImage = res.localData;
if (baseImage.indexOf('data:image') !== 0) {
baseImage = 'data:image/jpeg;base64,' + baseImage;
}
baseImage = baseImage
.replace(/\r|\n/g, '')
.replace('data:image/jpg', 'data:image/jpeg')
.replace('data:image/JPG', 'data:image/jpeg');
fileArr.push(base64ToFile(baseImage));
if (fileArr.length === localIds.length) {
resolve(fileArr);
} else {
getLocalImgData(localIds[fileArr.length]);
}
},
fail: rejectFn
});
};
getLocalImgData(localId);
});
};
resoveFn().then(async (files) => {
// 这里的files等同于通过input上传拿到的file,正常上传到后台服务器即可
// 下面==内的代码是我们业务实际的上传代码,可以不用关注
// ====================================================================================================
// 压缩文件
const newFiles = (await watermarkImg(files, '', { maxWidth: 1600, quality: 0.7 })) as File[];
// 阿里oss上传
api.base.oss.upload(newFiles).then((res) => {
const result = [];
res?.forEach((x: any, i: number) => {
if (x.res?.status === 200) {
result.push( x.url);
}
});
// 拿到结果展示在前端页面
resolve(result);
}, rejectFn);
// ====================================================================================================
}, rejectFn);
}
});
});
});
}
export function base64ToFile(urlData: string) {
const arr = urlData.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bytes = atob(arr[1]); // 解码base64
let n = bytes.length;
const ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new Blob([ia], { type: mime });
}
更多推荐
已为社区贡献1条内容
所有评论(0)