feat: 新增图片Exif信息

src/components/ShowFile/ShowFile.vue

@@ -538,7 +538,7 @@
                     formatSize(item.size) +
                     '\r\n' +
                     (item.w && item.h
-                      ? '分辨率：' + item.w + 'x' + item.h + '\r\n'
+                      ? '尺寸：' + item.w + 'x' + item.h + '\r\n'
                       : '') +
                     '名称：' +
                     item.name +
@@ -550,7 +550,8 @@
                     item.updateDate +
                     '\r\n' +
                     '路径：' +
-                    item.path
+                    item.path +
+                    '\r\n' + formatExif(item.exif)
                 "
                 :style="{paddingTop: 100/gridColumnNum + '%'}"
               >
@@ -693,7 +694,7 @@
         </div>
         <el-form-item
           v-show="rowContextData.w && rowContextData.h"
-          label="分辨率:"
+          label="尺寸:"
           class="details-resolution"
         >
           <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
@@ -718,6 +719,9 @@
         <el-form-item label="修改时间:">
           <span>{{ rowContextData.updateDate }}</span>
         </el-form-item>
+        <el-form-item label="Exif:">
+          <span style="white-space: break-spaces;">{{ formatExif(rowContextData.exif) }}</span>
+        </el-form-item>
       </el-form>
     </el-drawer>
 
@@ -873,7 +877,7 @@ import { mapGetters, mapState } from 'vuex'
 import { formatSize, formatTime } from '@/utils/number'
 import { getElementToPageLeft } from '@/utils/dom'
 import { suffix } from '@/utils/file-type'
-import Bus from '@/assets/js/bus'
+import { formatExif } from '@/utils/image'
 import api from '@/api/file-api'
 import BreadcrumbFilePath from '@/components/Breadcrumb/BreadcrumbFilePath'
 import IconFile from '@/components/Icon/IconFile'
@@ -2261,6 +2265,9 @@ export default {
     formatSize(size) {
       return formatSize(size)
     },
+    formatExif(exifInfo) {
+      return formatExif(exifInfo)
+    },
     upload() {
       // 打开文件选择框
       this.$store.dispatch('updateMessage', {
@@ -4433,6 +4440,11 @@ export default {
     white-space: normal;
     word-break: break-all;
     word-wrap: break-word;
+    line-height: 25px;
+  }
+
+  >>> .el-form-item__label {
+    line-height: 25px;
   }
 
   >>> .el-form-item {
@@ -4444,6 +4456,7 @@ export default {
 
     .el-form-item__content {
       line-height: 20px;
+      color: #84a0c3;
     }
 
     .el-form-item__label {

src/utils/image.js

@@ -0,0 +1,56 @@
+export function formatExif(exifInfo) {
+  if (!exifInfo) {
+    return ''
+  }
+  let exifStr = ''
+  if (exifInfo['dateTimeOriginal']) {
+    exifStr += `\r\n内容创作时间: ${exifInfo['dateTimeOriginal']}\r\n`
+  }
+  if (exifInfo['resolution']) {
+    exifStr += `分辨率: ${exifInfo['resolution']}\r\n`
+  }
+  if (exifInfo['make']) {
+    exifStr += `设备制造商: ${exifInfo['make']}\r\n`
+  }
+  if (exifInfo['model']) {
+    exifStr += `设备型号: ${exifInfo['model']}\r\n`
+  }
+  if (exifInfo['aperture']) {
+    exifStr += `光圈值: ${exifInfo['aperture']}\r\n`
+  }
+  if (exifInfo['exposureTime']) {
+    exifStr += `曝光时间: ${exifInfo['exposureTime']}\r\n`
+  }
+  if (exifInfo['focalLength']) {
+    exifStr += `焦距: ${exifInfo['focalLength']} 毫米\r\n`
+  }
+  if (exifInfo['isoEquivalent']) {
+    exifStr += `ISO感光度: ${exifInfo['isoEquivalent']}\r\n`
+  }
+  if (exifInfo['flash']) {
+    exifStr += `闪光灯: ${exifInfo['flash']}\r\n`
+  }
+  if (exifInfo['fNumber']) {
+    exifStr += `光圈数: ${exifInfo['fNumber']}\r\n`
+  }
+  if (exifInfo['exposureProgram']) {
+    exifStr += `曝光程序: ${exifInfo['exposureProgram']}\r\n`
+  }
+  if (exifInfo['meteringMode']) {
+    exifStr += `测光模式: ${exifInfo['meteringMode']}\r\n`
+  }
+  if (exifInfo['whiteBalanceMode']) {
+    exifStr += `白平衡: ${exifInfo['whiteBalanceMode']}\r\n`
+  }
+  if (exifInfo['software']) {
+    exifStr += `内容创作者: ${exifInfo['software']}\r\n`
+  }
+  if (exifInfo['longitude']) {
+    exifStr += `经度: ${exifInfo['longitude']}\r\n`
+  }
+  if (exifInfo['latitude']) {
+    exifStr += `纬度: ${exifInfo['latitude']}\r\n`
+  }
+  console.log(exifStr)
+  return exifStr
+}