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