背景:上传照片,期望支持ios的heic格式图片,服务端只接收jpg格式

环境

react、antd-mobile、heic2anylibheif-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);
		}
	};
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐