各大浏览器对 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.name let params = { }; params.url = fileUrl params.name = file.name; resolve(params) return }) .catch((err) => { Message.error("上传失败！"); reject(); return }) .finally(() => { hide.close() }) });};