[update 83990] 上传heic格式图片处理

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",

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",

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"></van-uploader>
           </div>
         </a-form-item>
@@ -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<unknown>}
+     */
+    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);
+    }
   }
 }
 </style>