hzdyjs/docs/变更管理/code-adjust-record-2025-01-27-image-upload-url-fix.md

图片上传组件URL获取修复记录

变更时间: 2025-01-27 15:30:00
变更人员: AI Assistant
变更文件: web/src/components/ImageUpload/index.vue
变更类型: 功能修复

🔍 问题描述

图片上传组件在上传成功后，url 字段存储的是 ossId，但需要调用接口获取真实的 URL 进行展示。

🛠️ 修复方案

1. 新增URL获取函数

// 根据ossId获取真实URL
const getRealUrlByOssId = async (ossId: string | number): Promise<string> => {
  try {
    const res = await listByIds(ossId);
    if (res.data && res.data.length > 0) {
      return res.data[0].url;
    }
    return '';
  } catch (error) {
    console.error('获取OSS文件URL失败:', error);
    return '';
  }
};

2. 修改上传成功回调

// 上传成功回调
const handleUploadSuccess = async (res: any, file: any) => {
  if (res.code === 200) {
    // 上传成功后，ossId存储的是ID，需要调用接口获取真实URL
    const ossId = res.data.ossId;
    const realUrl = await getRealUrlByOssId(ossId);
    
    uploadList.value.push({ 
      name: res.data.fileName, 
      url: realUrl || res.data.url, // 优先使用真实URL，如果没有则使用返回的url
      ossId: ossId 
    });
    uploadedSuccessfully();
  } else {
    number.value--;
    proxy?.$modal.closeLoading();
    proxy?.$modal.msgError(res.msg);
    imageUploadRef.value?.handleRemove(file);
    uploadedSuccessfully();
  }
};

📋 修复内容

1. 新增 getRealUrlByOssId 函数: 根据 ossId 调用 listByIds 接口获取真实URL
2. 修改 handleUploadSuccess 函数: 在上传成功后调用URL获取函数
3. 优化错误处理: 如果获取真实URL失败，则使用返回的url作为备选
4. 保持向后兼容: 不影响现有的回显逻辑

🎯 修复效果

• ✅ 上传成功后能正确获取并显示真实URL
• ✅ 图片预览功能正常工作
• ✅ 保持原有的删除和批量操作功能
• ✅ 错误处理更加完善

🔗 相关接口

• 接口: listByIds - 根据ossId获取文件信息
• 路径: /resource/oss/listByIds/{ossId}
• 方法: GET
• 返回: OssVO[] 数组，包含文件的真实URL

📝 注意事项

1. 该修复需要确保后端 listByIds 接口正常工作
2. 如果接口调用失败，会使用返回的url作为备选方案
3. 修复后的组件保持了原有的所有功能特性

🔄 测试建议

1. 测试图片上传功能，确认上传后能正确显示图片
2. 测试图片预览功能，确认能正常预览
3. 测试删除功能，确认能正常删除图片
4. 测试批量上传功能，确认多张图片都能正确处理