高拍仪-增加拍照图片自定义名字

src/business/platform/file/uploader/CameraDialogV2.vue

@@ -106,21 +106,32 @@
             <div
               v-for="(photo, index) in displayedPhotos"
               :key="index"
-              class="thumbnail-item"
-              :class="{ selected: isPhotoSelected(photo) }"
-              @click="handleSelectPhoto(photo)"
-              @dblclick="handlePreviewPhoto(photo, index)"
+              class="thumbnail-wrapper"
             >
-              <el-image
-                :src="photo"
-                class="thumbnail-image"
-                fit="cover"
-                :hide-on-click-modal="true"
-                :preview-disabled="true"
-              />
-              <div v-if="isPhotoSelected(photo)" class="selected-badge">
-                <i class="el-icon-check"></i>
+              <div
+                class="thumbnail-item"
+                :class="{ selected: isPhotoSelected(photo) }"
+                @click="handleSelectPhoto(photo)"
+                @dblclick="handlePreviewPhoto(photo, index)"
+              >
+                <el-image
+                  :src="photo"
+                  class="thumbnail-image"
+                  fit="cover"
+                  :hide-on-click-modal="true"
+                  :preview-disabled="true"
+                />
+                <div v-if="isPhotoSelected(photo)" class="selected-badge">
+                  <i class="el-icon-check"></i>
+                </div>
               </div>
+              <el-input
+                v-model="photoNames[photo]"
+                size="mini"
+                placeholder="输入名称"
+                class="photo-name-input"
+                @click.stop
+              />
             </div>
             <div v-if="photoHistory.length > 5" class="more-button-container">
               <el-button
@@ -367,6 +378,7 @@ export default {
       idCardResult: null,
       barcodeResult: '',
       photoHistory: [],
+      photoNames: {},
       showAllPhotos: false,
       selectedPhotos: [],
       previewImageList: [],
@@ -486,6 +498,7 @@ export default {
           const jpg = 'data:image/jpg;base64,' + response.data.photoBase64
           // const pngBase64 = await this.convertToPng(response.data.photoBase64)
           this.photoHistory.unshift(jpg)
+          this.$set(this.photoNames, jpg, '')
           if (this.multiple) {
             this.selectedPhotos.unshift(jpg)
           } else {
@@ -534,6 +547,7 @@ export default {
     },
     handleClearAll() {
       this.photoHistory = []
+      this.photoNames = {}
       this.selectedPhotos = []
       this.showAllPhotos = false
       this.$message.success('已清空全部拍照记录')
@@ -588,7 +602,11 @@ export default {
         this.$message.warning('请选择至少一张图片')
         return
       }
-      this.$emit('confirm', this.selectedPhotos)
+      const photosWithNames = this.selectedPhotos.map(photo => ({
+        photo,
+        customName: this.photoNames[photo] || ''
+      }))
+      this.$emit('confirm', photosWithNames)
       this.dialogVisible = false
       this.showAllPhotos = false
     },
@@ -669,7 +687,13 @@ export default {
   flex-wrap: wrap;
   gap: 10px;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
+}
+
+.thumbnail-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
 .thumbnail-item {
@@ -716,6 +740,10 @@ export default {
   height: 100%;
 }
 
+.photo-name-input {
+  width: 100px;
+}
+
 .more-button-container {
   width: 100px;
   height: 100px;

src/business/platform/file/uploader/upload.vue

@@ -186,12 +186,17 @@ export default {
 
       // 将 base64 转换为 File 对象并触发上传
       for (let i = 0; i < picArray.length; i++) {
-        const base64Str = picArray[i]
+        const item = picArray[i]
+        const base64Str = typeof item === 'string' ? item : item.photo
+        const customName = typeof item === 'object' ? item.customName : ''
         const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss')
-        const file = this.base64ToPngFile(
-          base64Str,
-          `拍照_${timestamp}${picArray.length > 1 ? `_${i + 1}` : ''}.jpg`
-        )
+        let fileName
+        if (customName) {
+          fileName = `${customName}.jpg`
+        } else {
+          fileName = `拍照_${timestamp}${picArray.length > 1 ? `_${i + 1}` : ''}.jpg`
+        }
+        const file = this.base64ToPngFile(base64Str, fileName)
 
         // 文件校验
         const canUpload = this.beforeUpload(file)