图片预览问题

zhangwencui

8 天以前 9e1e28591e0de5fa8f36abc144922e7809e60262

 src/pages/inspectionUpload/index.vue

@@ -27,7 +27,7 @@
                fontSize: '12px',
                marginRight: '8px'
              }">
                扫码上传
                巡检上传
              </u-button>
              <u-button type="success"
                        size="small"
@@ -153,7 +153,7 @@
                          style="margin-right: 5px;"></u-icon>
                  {{ uploading ? '上传中...' : '拍照' }}
                </u-button>
                <u-button type="success"
                <!-- <u-button type="success"
                          @click="chooseMedia('video')"
                          :loading="uploading"
                          :disabled="getCurrentFiles().length >= uploadConfig.limit"
@@ -164,7 +164,7 @@
                             color="#fff"
                             style="margin-right: 5px;"></uni-icons>
                  {{ uploading ? '上传中...' : '拍视频' }}
                </u-button>
                </u-button> -->
              </view>
              <!-- 上传进度 -->
              <view v-if="uploading"
@@ -180,6 +180,13 @@
                      :key="index"
                      class="file-item">
                  <view class="file-preview-container">
                    <!-- 删除按钮 -->
                    <view class="delete-btn"
                          @click="removeFile(index)">
                      <u-icon name="close"
                              size="12"
                              color="#fff"></u-icon>
                    </view>
                    <image v-if="file.type === 'image' || (file.type !== 'video' && !file.type)"
                           :src="file.url || file.tempFilePath || file.path || file.downloadUrl"
                           class="file-preview"
@@ -193,13 +200,6 @@
                                 style="margin-right: 5px;"></uni-icons>
                      <text class="video-text">视频</text>
                    </view>
                    <!-- 删除按钮 -->
                    <view class="delete-btn"
                          @click="removeFile(index)">
                      <u-icon name="close"
                              size="12"
                              color="#fff"></u-icon>
                    </view>
                  </view>
                  <view class="file-info">
                    <text class="file-name">{{ file.bucketFilename || file.name || (file.type === 'image' ? '图片' : '视频')
@@ -210,7 +210,7 @@
              </view>
              <view v-if="getCurrentFiles().length === 0"
                    class="empty-state">
                <text>请选择要上传的{{ getUploadTypeText() }}图片或视频</text>
                <text>请选择要上传的{{ getUploadTypeText() }}图片</text>
              </view>
              <!-- 统计信息 -->
              <!-- <view class="upload-summary">
@@ -281,8 +281,9 @@
                      class="attachment-item"
                      @click="previewAttachment(file)">
                  <view class="attachment-preview-container">
                    {{formatFileUrl(file.url || file.downloadUrl)}}
                    <image v-if="file.type === 'image' || isImageFile(file)"
                           :src="file.url || file.downloadUrl"
                           :src="formatFileUrl(file.url || file.downloadUrl)"
                           class="attachment-preview"
                           mode="aspectFill" />
                    <view v-else
@@ -410,7 +411,7 @@

  // 计算上传URL
  const uploadFileUrl = computed(() => {
    const baseUrl = "http://192.168.1.35:8888";
    const baseUrl = config.baseUrl;

    return baseUrl + uploadConfig.action;
  });
@@ -825,6 +826,11 @@

  // 提交上传
  const submitUpload = async () => {
    // console.log("提交上传数据:", {
    //   before: beforeModelValue.value,
    //   after: afterModelValue.value,
    //   issue: issueModelValue.value,
    // });
    try {
      // 检查是否选择了异常状态
      if (hasException.value === null) {
@@ -857,12 +863,15 @@
      let arr = [];
      if (beforeModelValue.value.length > 0) {
        arr.push(...beforeModelValue.value);
        infoData.value.beforeModelValue = beforeModelValue.value;
      }
      if (afterModelValue.value.length > 0) {
        arr.push(...afterModelValue.value);
        infoData.value.afterModelValue = afterModelValue.value;
      }
      if (issueModelValue.value.length > 0) {
        arr.push(...issueModelValue.value);
        infoData.value.issueModelValue = issueModelValue.value;
      }

      // 传给后端的临时文件ID列表（tempFileIds）
@@ -1045,7 +1054,7 @@
  };

  // 文件访问基础域（后端要求前缀）
  const filePreviewBase = "http://192.168.1.35:8888";
  const filePreviewBase = config.baseUrl;

  // 将后端返回的文件地址规范成可访问URL
  // 兼容场景：
@@ -1558,7 +1567,7 @@
    };

    uploadList.value.push(fileData);

    console.log("添加到分类前:", fileData);
    // 立即添加到对应的分类，不等待所有文件上传完成
    switch (currentUploadType.value) {
      case "before":
@@ -1581,7 +1590,19 @@
  const uploadedSuccessfully = () => {
    // 此函数已不再使用，文件上传成功后立即添加到对应分类
  };

  // 格式化文件URL
  const formatFileUrl = url => {
    if (!url) return "";
    if (url.startsWith("http://") || url.startsWith("https://")) {
      return url;
    }
    const uploadsIndex = url.indexOf("uploads");
    if (uploadsIndex !== -1) {
      const relativePath = url.substring(uploadsIndex);
      return `${config.baseUrl}/${relativePath}`;
    }
    return `${config.baseUrl}/${url}`;
  };
  // 格式化文件大小
  const formatFileSize = size => {
    if (!size) return "";
@@ -1783,7 +1804,7 @@
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -1922,6 +1943,7 @@
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
  }

  .delete-btn:hover {