Semi Design Upload组件文件压缩与事件处理实践

1. 问题背景与现象分析

最近在使用Semi Design的Upload组件时遇到一个典型问题：当实现自定义压缩功能后，上传文件的操作无法正常触发onChange事件。这个现象在需要前端预处理文件的场景中尤为常见，特别是图片上传前的压缩优化场景。

具体表现为：

• 未添加压缩逻辑时，文件选择后onChange正常触发
• 添加压缩逻辑后，控制台无报错但onChange回调不执行
• 文件实际已完成压缩处理，但UI状态未更新

2. 核心问题定位

2.1 事件触发机制分析

Semi Design的Upload组件内部采用Promise链式处理上传流程。当自定义beforeUpload返回Promise时，组件会等待该Promise resolved才会继续后续流程。常见的问题根源在于：

1. Promise未正确返回：压缩逻辑可能未返回有效的Promise对象
2. 状态更新冲突：压缩过程中修改了文件对象引用
3. 异常未捕获：压缩过程中的错误导致Promise链断裂

2.2 典型错误实现示例

javascript复制const beforeUpload = (file) => {
  // 错误示例1：直接修改原文件对象
  compressImage(file).then(compressed => {
    file = compressed // 这会导致引用丢失
    return true
  })
  
  // 错误示例2：未返回Promise链
  compressImage(file)
  return true
}

3. 正确实现方案

3.1 完整解决方案代码

javascript复制const beforeUpload = async (file) => {
  try {
    const compressedFile = await compressImage(file)
    return compressedFile // 关键点1：返回新文件对象
  } catch (error) {
    console.error('压缩失败:', error)
    return false // 关键点2：异常处理
  }
}

// 压缩工具函数示例
const compressImage = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = (event) => {
      const img = new Image()
      img.src = event.target.result
      img.onload = () => {
        const canvas = document.createElement('canvas')
        // ...实现压缩逻辑...
        canvas.toBlob((blob) => {
          resolve(
            new File([blob], file.name, {
              type: 'image/jpeg',
              lastModified: Date.now()
            })
          )
        }, 'image/jpeg', 0.6)
      }
    }
    reader.readAsDataURL(file)
  })
}

3.2 关键实现要点

1. 保持文件引用一致：

   • 必须返回新的File对象
   • 保持原始文件的name等元信息
   • 更新lastModified防止缓存问题

2. Promise链完整性：

   • 使用async/await确保流程清晰
   • 所有分支路径都有返回值
   • 错误处理不中断事件流

3. 组件状态更新：

   • 确保返回的文件对象是有效File实例
   • 文件类型需与accept声明一致
   • 文件大小需符合maxSize限制

4. 深度调试技巧

4.1 事件流追踪方法

javascript复制// 在Upload组件上添加调试属性
<Upload
  debug
  beforeUpload={beforeUpload}
  onChange={(file, fileList, event) => {
    console.log('事件流追踪:', { file, fileList, event })
  }}
/>

4.2 常见问题排查表

5. 性能优化建议

1. 分片压缩策略：

javascript复制// 对大文件分片处理
const CHUNK_SIZE = 1024 * 1024 // 1MB
if (file.size > 5 * CHUNK_SIZE) {
  return compressInChunks(file)
}

2. Web Worker优化：

javascript复制// 将压缩逻辑移至Worker线程
const worker = new Worker('./compress.worker.js')
worker.postMessage({ file })
worker.onmessage = (e) => {
  resolve(e.data.compressed)
}

3. 内存管理：

javascript复制// 及时释放资源
URL.revokeObjectURL(img.src)
canvas.width = 0
canvas.height = 0

6. 扩展应用场景

6.1 多文件批量压缩

javascript复制const beforeUpload = async (fileList) => {
  return Promise.all(
    fileList.map(file => 
      compressImage(file).catch(() => file) // 压缩失败保留原文件
    )
  )
}

6.2 自定义压缩参数

javascript复制// 根据文件类型动态调整质量
const getQuality = (type) => {
  return type.includes('png') ? 0.8 : 0.6
}

canvas.toBlob(blob => {
  resolve(new File([blob], file.name, { 
    type: file.type,
    lastModified: Date.now()
  }))
}, file.type, getQuality(file.type))

7. 版本兼容性说明

1. Semi Design 版本差异：

   • v1.x：需要手动触发onChange
   • v2.x+：自动处理Promise链

2. 浏览器兼容处理：

javascript复制// 处理Safari的Blob兼容问题
const safeBlob = blob => 
  blob || new Blob([data], { type: 'image/jpeg' })

在实际项目中遇到的典型情况是，当压缩后的文件体积反而大于原始文件时（常见于某些PNG图片），建议添加体积校验逻辑：

javascript复制const shouldCompress = (original, compressed) => {
  return compressed.size < original.size * 0.9
}