fix: 对象存储图片，没有jpg后缀不用做扩展名检测，不然图片不渲染

2026-03-10 15:20:35 +08:00
parent 255bd9e832
commit 5d16589e54
1 changed files with 213 additions and 12 deletions
@@ -322,12 +322,32 @@
          />
          <div v-else-if="settingForm.type === 'file'" class="file-upload-section">
            <div class="file-info-display" v-if="settingForm.value && fileInfo">
-              <div class="file-details">
-                <span class="file-name" :title="fileInfo.realName || fileInfo.saveName">{{ fileInfo.realName || fileInfo.saveName }}</span>
-                <span class="file-id">文件ID: {{ settingForm.value }}</span>
-                <span class="file-size">{{ formatFileSize(fileInfo.size) }}</span>
+              <div class="file-item">
+                <!-- 图片预览 -->
+                <div class="file-preview" v-if="fileInfo.url">
+                  <img :src="processImageUrl(fileInfo.url)" :alt="fileInfo.realName" class="preview-image" @click="previewImage(fileInfo.url)" @error="handleImageError" />
+                </div>
+                <!-- 图片加载失败占位符 -->
+                <div class="file-preview" v-else>
+                  <div class="file-placeholder">
+                    <el-icon><Document /></el-icon>
+                  </div>
+                </div>
+                
+                <!-- 文件信息 -->
+                <div class="file-details">
+                  <span class="file-name" :title="fileInfo.realName || fileInfo.saveName">{{ fileInfo.realName || fileInfo.saveName }}</span>
+                  <span class="file-id">文件ID: {{ settingForm.value }}</span>
+                  <span class="file-size">{{ formatFileSize(fileInfo.size) }}</span>
+                  <!-- 非图片文件预览链接 -->
+                  
+                </div>
+                
+                <!-- 操作按钮 -->
+                <div class="file-actions">
+                  <el-button type="danger" size="small" @click="clearFile">删除</el-button>
+                </div>
              </div>
-              <el-button type="danger" size="small" @click="clearFile">删除</el-button>
            </div>
            <el-upload
              v-else
@@ -353,12 +373,29 @@
            <div class="file-list-info-display" v-if="getFileList(settingForm.value).length > 0">
              <div class="file-list-details">
                <div v-for="(fileInfo, index) in fileListInfo" :key="fileInfo.id" class="file-item">
+                  <!-- 图片预览 -->
+                  <div class="file-preview" v-if="fileInfo.url">
+                    <img :src="processImageUrl(fileInfo.url)" :alt="fileInfo.realName" class="preview-image" @click="previewImage(fileInfo.url)" @error="handleImageError" />
+                  </div>
+                  <!-- 图片加载失败占位符 -->
+                  <div class="file-preview" v-else>
+                    <div class="file-placeholder">
+                      <el-icon><Document /></el-icon>
+                    </div>
+                  </div>
+                  
+                  <!-- 文件信息 -->
                  <div class="file-details">
                    <span class="file-name" :title="fileInfo.realName || fileInfo.saveName">{{ fileInfo.realName || fileInfo.saveName }}</span>
                    <span class="file-id">文件ID: {{ fileInfo.id }}</span>
-                    <span class="file-size">{{ formatFileSize(fileInfo.size) }}</span>
+                    <!-- 非图片文件预览链接 -->
+                    
+                  </div>
+                  
+                  <!-- 操作按钮 -->
+                  <div class="file-actions">
+                    <el-button type="danger" size="small" @click="removeFile(index)">删除</el-button>
                  </div>
-                  <el-button type="danger" size="small" @click="removeFile(index)">删除</el-button>
                </div>
              </div>
            </div>
@@ -431,6 +468,11 @@
        <el-button type="primary" @click="submitSettingForm">确定</el-button>
      </template>
    </el-dialog>
+
+    <!-- 图片查看器 -->
+    <el-dialog v-model="imageViewerVisible" width="auto" destroy-on-close>
+      <img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
+    </el-dialog>
  </div>
 </template>

@@ -568,6 +610,8 @@ const fileInfo = ref(null)
 const fileUploading = ref(false)
 const fileListInfo = ref([])
 const newStringItem = ref('')
+const imageViewerVisible = ref(false)
+const currentViewImage = ref('')

 // 格式化日期时间
 const formatDate = (dateString) => {
@@ -855,9 +899,34 @@ const handleEditSetting = async (row) => {
      } else if (data.type === 'float') {
        settingForm.value = parseFloat(data.value) || 0
      } else if (data.type === 'file') {
-        fileInfo.value = null // 如果需要获取文件信息，可以调用文件详情接口
+        // 处理单个文件类型，获取文件信息
+        if (data.parsedValue && typeof data.parsedValue === 'string') {
+          fileInfo.value = {
+            id: data.value,
+            url: processImageUrl(data.parsedValue), // 使用processImageUrl处理URL
+            realName: '文件',
+            saveName: 'file',
+            size: 0
+          }
+        } else {
+          fileInfo.value = null
+        }
      } else if (data.type === 'file_list') {
-        fileListInfo.value = [] // 如果需要获取文件信息，可以调用文件详情接口
+        // 处理文件列表类型，使用parsedValue来获取文件信息
+        if (data.parsedValue && Array.isArray(data.parsedValue)) {
+          fileListInfo.value = data.parsedValue.map((url, index) => {
+            const fileIds = getFileList(data.value)
+            return {
+              id: fileIds[index] || `file_${index}`,
+              url: processImageUrl(url), // 使用processImageUrl处理URL
+              realName: `文件${index + 1}`,
+              saveName: `file_${index}`,
+              size: 0
+            }
+          })
+        } else {
+          fileListInfo.value = []
+        }
      } else if (data.type === 'string_list') {
        newStringItem.value = ''
      }
@@ -925,7 +994,12 @@ const handleFileChange = async (file) => {
    if (res.data.code === 200 && res.data.data.length > 0) {
      const uploadedFile = res.data.data[0]
      settingForm.value = String(uploadedFile.id)
-      fileInfo.value = uploadedFile
+      
+      // 确保上传的文件URL也经过处理
+      fileInfo.value = {
+        ...uploadedFile,
+        url: processImageUrl(uploadedFile.url || uploadedFile.realName)
+      }
      ElMessage.success('文件上传成功')
    } else {
      ElMessage.error(res.data.message || '文件上传失败')
@@ -952,7 +1026,46 @@ const formatFileSize = (bytes) => {
 }

 const previewFile = (fileId) => {
-  ElMessage.info(`文件ID: ${fileId}`)
+  // 这里可以实现文件预览逻辑
+  console.log('预览文件:', fileId)
+  ElMessage.info('文件预览功能待实现')
+}
+
+const previewUrl = (url) => {
+  window.open(url, '_blank')
+}
+
+// 检查是否为图片文件
+const isImageFile = (url) => {
+  if (!url) return false
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
+  // 使用相同的URL处理逻辑
+  const processedUrl = processImageUrl(url)
+  const extension = processedUrl.toLowerCase().substring(processedUrl.lastIndexOf('.'))
+  return imageExtensions.includes(extension)
+}
+
+// 处理图片URL，确保正确显示
+const processImageUrl = (url) => {
+  if (!url) return ''
+  // 先处理转义字符：将 \u0026 替换为 &
+  let processedUrl = url.replace(/\\u0026/g, '&')
+  // 再进行URL解码
+  return decodeURIComponent(processedUrl)
+}
+
+// 图片预览
+const previewImage = (url) => {
+  // 使用图片查看器对话框
+  currentViewImage.value = processImageUrl(url)
+  imageViewerVisible.value = true
+}
+
+// 处理图片加载失败
+const handleImageError = (event) => {
+  // 图片加载失败时，可以隐藏图片或显示占位符
+  console.log('图片加载失败:', event.target.src)
+  // 这里可以添加更多的错误处理逻辑
 }

 const getFileList = (value) => {
@@ -980,7 +1093,13 @@ const handleFileListChange = async (file) => {
      const currentFileIds = getFileList(settingForm.value)
      currentFileIds.push(String(uploadedFile.id))
      settingForm.value = currentFileIds.join(',')
-      fileListInfo.value.push(uploadedFile)
+      
+      // 确保新上传的文件URL也经过处理
+      const processedFile = {
+        ...uploadedFile,
+        url: processImageUrl(uploadedFile.url || uploadedFile.realName)
+      }
+      fileListInfo.value.push(processedFile)
      ElMessage.success('文件上传成功')
    } else {
      ElMessage.error(res.data.message || '文件上传失败')
@@ -1149,6 +1268,88 @@ onMounted(() => {
  margin-left: 8px;
 }

+/* 文件预览样式 */
+.file-preview {
+  margin-top: 8px;
+}
+
+.preview-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  border: 1px solid #e1e8ed;
+  object-fit: cover;
+}
+
+.preview-image:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.file-preview-link {
+  margin-top: 8px;
+}
+
+.file-item {
+  border: 1px solid #e1e8ed;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 8px;
+  background: #fafbfc;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.file-preview {
+  flex-shrink: 0;
+}
+
+.file-placeholder {
+  width: 80px;
+  height: 80px;
+  border-radius: 4px;
+  border: 1px solid #e1e8ed;
+  background: #f5f7fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 24px;
+}
+
+.file-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.file-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.file-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.file-id {
+  font-size: 12px;
+  color: #909399;
+}
+
+.file-size {
+  font-size: 12px;
+  color: #909399;
+}
+
 /* 表格行样式 */
 :deep(.setting-tree-table .el-table__row--level-1) {
  background-color: #fafbfc;