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

• 各大浏览器对 HEIC 格式图片的支持情况，包括上传和显示的支持度
  浏览器版本HEIC 上传HEIC 显示Chrome版本 85 及以上支持不支持Firefox所有版本支持不支持Safari版本 11 及以上支持支持Edge版本 18 及以上支持不支持Opera所有版本支持不支持IE不支持不支持不支持

• 安装

npm install heic2any

• 封装的方法

// 上传至阿里服务器import heic2any from'heic2any';constuploadFile1=function(file, fileImport){const hide =Message({iconClass:"el-icon-loading",duration:0,dangerouslyUseHTMLString:true,message:'<span style="margin-left:10px">上传中...</span>'});returnnewPromise((resolve, reject)=>{let env = storage.get('env')||null;if(!env ||!env.expiration ||newDate().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)})}})};constuploadFile2=asyncfunction(file, fileImport, hide){// 检测heic格式图片 转换成jpg格式再上传至服务器if(file && file.type ==='image/heic'){try{const blob =awaitheic2any({blob: file,toType:'image/jpeg',});
      file =newFile([blob],`${file.name.split('.')[0]||'image'}.jpg`,{type:'image/jpeg'})}catch(e){
      Message.error("上传失败！");}}let env = storage.get('env')||null;var client =newOSS.Wrapper(env)let type = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()let storeAs ='',
    time =newDate().getTime()let fileName = file.name.substring(0, file.name.lastIndexOf('.'))var reg =newRegExp(',','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}`}returnnewPromise((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()})});};