前端上传heic图片转jpe格式并展示

• 各大浏览器对 HEIC 格式图片的支持情况，包括上传和显示的支持度

• 安装

npm install heic2any

• 封装的方法

// 上传至阿里服务器
import heic2any from 'heic2any';
const uploadFile1 = function(file, fileImport) {const hide = Message({iconClass: "el-icon-loading",duration: 0,dangerouslyUseHTMLString: true,message: '<span style="margin-left:10px">上传中...</span>'});return new Promise((resolve, reject) => {let env = storage.get('env') || null;if (!env || !env.expiration || new Date().getTime() >= env.expiration) {request(aliyunUrl, 'get', {}).then(res => {const { accessKeyId, accessKeySecret, securityToken, expiration } = res.data.data;env = {region: 'oss-cn-hangzhou',accessKeyId: accessKeyId,accessKeySecret: accessKeySecret,stsToken: securityToken,expiration: expiration,//过期时间bucket: ossUrl, //文件名称secure: true,};storage.set('env', env)uploadFile2(file, fileImport, hide).then(res => {resolve(res)})})} else {uploadFile2(file, fileImport, hide).then(res => {resolve(res)})}})
};
const uploadFile2 = async function(file, fileImport, hide) {// 检测heic格式图片 转换成jpg格式再上传至服务器if (file && file.type === 'image/heic') {try {const blob = await heic2any({blob: file,toType: 'image/jpeg',});file = new File([blob], `${file.name.split('.')[0] || 'image'}.jpg`, { type: 'image/jpeg' })} catch (e) {Message.error("上传失败！");}}let env = storage.get('env') || null;var client = new OSS.Wrapper(env)let type = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()let storeAs = '',time = new Date().getTime()let fileName = file.name.substring(0, file.name.lastIndexOf('.'))var reg = new RegExp(',', 'g')fileName = fileName.replace(reg, '')if (fileImport) {//文件导入账户特殊处理storeAs = `sasspc/upload/${Math.floor(Math.random() * 150)}_${time}${type}`} else {storeAs = `sasspc/upload/${Math.floor(Math.random() * 150)}_${time}${type}`}return new Promise((resolve, reject) => {client.multipartUpload(storeAs, file).then((res) => {let fileUrl = 'https://' + ossUrl + res.namelet params = {};params.url = fileUrlparams.name = file.name;resolve(params)return}).catch((err) => {Message.error("上传失败！");reject();return}).finally(() => {hide.close()})});
};