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

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

浏览器	版本	HEIC 上传	HEIC 显示
Chrome	版本 85 及以上	支持	不支持
Firefox	所有版本	支持	不支持
Safari	版本 11 及以上	支持	支持
Edge	版本 18 及以上	支持	不支持
Opera	所有版本	支持	不支持
IE	不支持	不支持	不支持

• 安装

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()
      })
  });
};