环境背景:上传照片,期望支持ios的heic格式图片,服务端只接收jpg格式
react、antd-mobile、heic2any、libheif-js
思路使用heic2any讲图片在前端转换成jpg格式,并重新组装file发送给服务端
/**
* 图片选中后 如果是heic图片 此处需要做下转换
*/
const onChange: any = (files: Array<any>, operationType: string, index: number) => {
// 图片上传
if (files.length) {
// 单张图片
let file = files[0].file;
const fileName = file.name;
if (fileName.toLowerCase().endsWith(`.heic`)) {
Toast.loading('Loading...', 10, () => {
});
heic2any({
blob: file,
toType: "image/jpg",
}).then((resultBlob: any) => {
file = new File([resultBlob], fileName + ".jpg", {
type: "image/jpeg",
lastModified: new Date().getTime()
});
const reader: any = new FileReader();
reader.onload = (e: ChangeEvent) => {
// 转换base64
files[0].url = (e.target as any).result;
setFiles(files);
Toast.hide();
};
// URL.createObjectURL(resultBlob);
reader.readAsDataURL(file);
// 用于预览 blob:http 使用FileReader对象和ImagePicker插件保持一致
// files[0].url = URL.createObjectURL(resultBlob);
// setFiles(files);
}).catch(() => {
Toast.hide();
});
} else {
setFiles(files);
}
}
// 图片清除
else {
setFiles(files);
}
};
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)