编辑 | blame | 历史 | 原始文档

COS上传工具使用说明

重要原则

⚠️ 必须先保存后台数据,再上传文件,避免孤立的COS资源!

使用方式

1. 引入工具类

const cosUtil = require('../../lib/cosUtil.js')

2. 正确的上传流程示例

用户注册时上传头像

// ❌ 错误方式:先上传文件再保存数据
// 如果保存数据失败,会产生孤立的COS文件

// ✅ 正确方式:先保存用户数据,再上传头像
async function registerWithAvatar() {
  try {
    // 步骤1: 先提交注册数据(不包含头像)
    const registrationResult = await submitRegistration({
      name: '张三',
      phone: '13800138000',
      // ... 其他数据
    })
    
    const registrationId = registrationResult.registrationId
    
    // 步骤2: 注册成功后,再上传头像
    const avatarResult = await cosUtil.chooseAndUploadImage({
      count: 1,
      sizeType: ['compressed']
    }, 'avatar', (progress) => {
      console.log('头像上传进度:', progress + '%')
    })
    
    // 步骤3: 保存头像媒体记录到后台
    await saveMediaRecord({
      fileName: avatarResult.fileName,
      filePath: avatarResult.key,
      fileSize: avatarResult.fileSize,
      fileType: 'image/jpeg',
      storageType: 'COS',
      bucketName: 'ryc-1379367838',
      region: 'ap-chengdu',
      targetType: 6, // STUDENT_AVATAR
      targetId: registrationId
    })
    
    console.log('注册和头像上传完成')
    
  } catch (error) {
    console.error('注册失败:', error)
    // 如果有已上传的文件,需要清理
    if (avatarResult && avatarResult.key) {
      await cosUtil.deleteFile(avatarResult.key)
    }
  }
}

3. 各种文件类型上传示例

上传头像

// 选择并上传头像
cosUtil.chooseAndUploadImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera']
}, 'avatar', (progress) => {
  console.log('头像上传进度:', progress + '%')
}).then(result => {
  console.log('头像上传成功:', result)
  // result.key: 文件在COS中的路径
  // result.url: 文件访问URL
  // result.fileName: 生成的唯一文件名
}).catch(error => {
  console.error('头像上传失败:', error)
})

上传普通图片

// 选择并上传图片
cosUtil.chooseAndUploadImage({
  count: 9, // 最多9张
  sizeType: ['original', 'compressed']
}, 'image', (progress) => {
  console.log('图片上传进度:', progress + '%')
}).then(results => {
  console.log('图片上传成功:', results)
}).catch(error => {
  console.error('图片上传失败:', error)
})

上传视频

// 选择并上传视频
cosUtil.chooseAndUploadVideo({
  sourceType: ['album', 'camera'],
  maxDuration: 60, // 最长60秒
  camera: 'back'
}, (progress) => {
  console.log('视频上传进度:', progress + '%')
}).then(result => {
  console.log('视频上传成功:', result)
}).catch(error => {
  console.error('视频上传失败:', error)
})

直接上传文件

// 直接上传指定文件
cosUtil.uploadFile(
  'wxfile://tmp_xxx.jpg', // 本地文件路径
  'image', // 文件类型
  'my-photo.jpg', // 原始文件名
  (progress) => {
    console.log('上传进度:', progress + '%')
  }
).then(result => {
  console.log('文件上传成功:', result)
}).catch(error => {
  console.error('文件上传失败:', error)
})

4. 批量上传

const files = [
  { filePath: 'wxfile://tmp_1.jpg', fileType: 'image', originalName: 'photo1.jpg' },
  { filePath: 'wxfile://tmp_2.jpg', fileType: 'image', originalName: 'photo2.jpg' },
  { filePath: 'wxfile://tmp_3.mp4', fileType: 'video', originalName: 'video1.mp4' }
]

cosUtil.batchUpload(files, (fileIndex, progress, totalFiles) => {
  console.log(`文件 ${fileIndex + 1}/${totalFiles} 上传进度: ${progress}%`)
}).then(results => {
  console.log('批量上传成功:', results)
}).catch(error => {
  console.error('批量上传失败:', error)
})

5. 文件管理

获取文件URL

const fileUrl = cosUtil.getFileUrl('images/20241201/1234567890_abc123.jpg')
console.log('文件访问地址:', fileUrl)

删除文件

cosUtil.deleteFile('images/20241201/1234567890_abc123.jpg').then(() => {
  console.log('文件删除成功')
}).catch(error => {
  console.error('文件删除失败:', error)
})

文件路径规范

工具类会自动按照后台规范生成文件路径:

  • 头像文件: avatars/yyyyMMdd/timestamp_random.ext
  • 图片文件: images/yyyyMMdd/timestamp_random.ext
  • 视频文件: videos/yyyyMMdd/timestamp_random.ext
  • 附件文件: attachments/yyyyMMdd/timestamp_random.ext

错误处理

try {
  const result = await cosUtil.uploadAvatar(filePath, originalName)
  // 上传成功处理
} catch (error) {
  if (error.code === 'NoSuchBucket') {
    console.error('存储桶不存在')
  } else if (error.code === 'AccessDenied') {
    console.error('访问被拒绝,请检查密钥配置')
  } else {
    console.error('上传失败:', error.message)
  }
}

注意事项

  1. 先保存数据,再上传文件 - 避免产生孤立的COS资源
  2. 处理上传失败 - 如果数据保存失败,需要清理已上传的文件
  3. 进度反馈 - 大文件上传时提供进度反馈,提升用户体验
  4. 文件大小限制 - 注意小程序文件大小限制(通常为100MB)
  5. 网络异常处理 - 提供重试机制和错误提示