diff --git a/package-lock.json b/package-lock.json index 21a888f..e011e66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10630,6 +10630,11 @@ "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "heic2any": { + "version": "0.0.4", + "resolved": "https://registry.npmmirror.com/heic2any/-/heic2any-0.0.4.tgz", + "integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==" + }, "hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz", diff --git a/package.json b/package.json index c4a1633..5725f98 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dom-align": "1.12.0", "echarts": "^5.4.2", "enquire.js": "^2.1.6", + "heic2any": "0.0.4", "js-base64": "^3.6.0", "js-cookie": "^2.2.0", "jsencrypt": "^3.0.0-rc.1", diff --git a/src/views/mobile/mine/Mine.vue b/src/views/mobile/mine/Mine.vue index 7e973a4..47713c9 100644 --- a/src/views/mobile/mine/Mine.vue +++ b/src/views/mobile/mine/Mine.vue @@ -13,6 +13,7 @@ :max-size="global.maxUploadFileSize" @oversize="onOversize" v-model="fileList" + :after-read="handleAfterRead" max-count="1"> @@ -49,7 +50,9 @@ import { queryDepartTreeList } from '@api/api' import DictPicker from '@comp/vant/DictPicker' import SelectPicker from '@comp/vant/SelectPicker' import { getAction, getFileAccessHttpUrl } from '@api/manage' +import heic2any from 'heic2any' import { Toast } from 'vant' + export default { name: 'Mine', components: { SelectPicker, DictPicker }, @@ -90,6 +93,71 @@ export default { this.getUserDeparts(this.model.id) }, methods: { + // 文件读取完成 + handleAfterRead (file) { + // 先不回显图片(上传中) + this.fileList = [{ status: 'uploading' }] + // 判断是否heic格式与后缀不对的图片 + this.isHEICFile(file.file) + // 如果是heic转成真正的后缀图片,否则就展示当前的图片 + .then(bool => { + console.log(bool, 'isHEICFile') + if (bool) { + return heic2any({ + blob: file.file, + toType: file.file.type, + quality: 1 + }) + } else { + this.fileList = [{ + isImage: true, + url: URL.createObjectURL(file.file) + }] + } + }) + // 成功了就显示转换后的图片 + .then(blob => { + if (blob) { + this.fileList = [{ + url: URL.createObjectURL(blob), + isImage: true + }] + } + }) + // 失败了就不显示 + .catch(err => { + console.log(err.message) + Toast('上传图片格式有误,请重试') + this.fileList = [] + }) + }, + /** + * 判断文件是否heic图片 + * @param file + * @description heic格式hex参考 https://www.garykessler.net/library/file_sigs.html + * @return {Promise} + */ + isHEICFile (file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + const offset = 4 + const blob = file.slice(offset, 8 + offset) // 取文件的前8位,偏移4位 + + reader.onload = function () { + const uint8Arr = new Uint8Array(reader.result) + const HEIC_HEADER = [0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63] + for (let i = 0; i < HEIC_HEADER.length; i++) { + if (uint8Arr[i] !== HEIC_HEADER[i]) { + resolve(false) + } + if (i === HEIC_HEADER.length - 1) { + resolve(true) + } + } + } + reader.readAsArrayBuffer(blob) + }) + }, onOversize () { Toast('最大上传图片20MB') }, @@ -168,6 +236,9 @@ export default { width: 1.2rem; height: 1.2rem; } + /deep/ .van-uploader__file { + opacity: 0; + } /deep/ .van-uploader__preview-image { width: 100%; height: 100%; @@ -181,6 +252,9 @@ export default { font-size: 0.16rem; color: #fff; } + /deep/ .van-uploader__mask { + background-color: rgba(255, 255, 255, 0.1); + } } }