uniapp 如何上传图片到腾讯云COS

在uniapp中如何实现图片上传到腾讯云COS的功能？需要具体步骤和代码示例，包括前端选择图片、获取临时路径，以及后端如何配置COS的密钥和bucket信息。是否需要在uniapp中引入SDK，还是直接通过API接口上传？上传过程中如何保证安全性和处理可能的错误？

2 回复

使用uni.chooseImage选择图片，通过uni.uploadFile上传到腾讯云COS。需配置COS的SecretId、SecretKey和存储桶信息，注意在服务端生成临时密钥更安全。


在 UniApp 中上传图片到腾讯云 COS（对象存储），可以通过以下步骤实现。示例代码基于 COS JavaScript SDK，适用于 H5 和小程序环境。

步骤概述：

  1. 安装 COS SDK：在项目中引入腾讯云 COS SDK。
  2. 获取临时密钥：从后端获取临时密钥（推荐使用临时密钥，避免泄露永久密钥）。
  3. 选择图片：使用 UniApp API 选择本地图片。
  4. 上传到 COS：调用 SDK 上传文件。

示例代码：

// 1. 引入 COS SDK（需先安装，H5 通过 npm 安装，小程序需下载 min.js 并导入）
// 对于小程序，下载 cos-wx-sdk-v5.min.js 放到项目目录，然后：
import COS from '@/utils/cos-wx-sdk-v5.min.js'; // 调整路径

// 2. 初始化 COS 实例（使用临时密钥）
const cos = new COS({
  getAuthorization: function (options, callback) {
    // 从后端获取临时密钥（替换为你的后端 API）
    uni.request({
      url: 'https://your-server.com/sts', // 后端临时密钥接口
      method: 'GET',
      success: (res) => {
        const data = res.data;
        callback({
          TmpSecretId: data.tmpSecretId,
          TmpSecretKey: data.tmpSecretKey,
          SecurityToken: data.sessionToken,
          StartTime: data.startTime, // 可选
          ExpiredTime: data.expiredTime, // 可选
        });
      },
      error: (err) => {
        console.error('获取密钥失败:', err);
        uni.showToast({ title: '上传失败', icon: 'none' });
      }
    });
  }
});

// 3. 选择并上传图片
async function uploadImage() {
  try {
    // 选择图片（示例为选择单张）
    const res = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'], // 可压缩
      sourceType: ['album', 'camera'] // 相册或相机
    });
    
    const file = res.tempFiles[0];
    const key = `images/${Date.now()}_${file.name}`; // 生成唯一文件名
    
    // 上传到 COS
    cos.putObject({
      Bucket: 'your-bucket-1250000000', // 替换为你的存储桶名称
      Region: 'ap-beijing', // 替换为你的存储桶地域
      Key: key,
      Body: file, // 文件对象
      onProgress: function (progressData) {
        console.log('上传进度:', JSON.stringify(progressData));
      }
    }, function (err, data) {
      if (err) {
        console.error('上传失败:', err);
        uni.showToast({ title: '上传失败', icon: 'none' });
      } else {
        console.log('上传成功:', data.Location);
        uni.showToast({ title: '上传成功' });
        // 返回文件 URL（如 https://your-bucket.cos.ap-beijing.myqcloud.com/images/xxx.jpg）
      }
    });
  } catch (error) {
    console.error('选择图片失败:', error);
  }
}

注意事项：

  • 临时密钥：务必通过后端获取（使用 STS 服务），避免前端暴露永久密钥。
  • 存储桶配置：在腾讯云 COS 控制台设置 CORS 规则，允许你的域名。
  • 小程序环境：需在 manifest.json 的 mp-weixin 部分添加 "requiredPrivateInfos": ["chooseImage"] 权限。
  • 文件路径：上传成功后，COS 返回 data.Location 可拼接为完整访问 URL。

简化方案（仅 H5）：

如果仅用于 H5，可使用 XMLHttpRequest 直接上传，但临时密钥仍需后端支持。

以上代码覆盖了核心流程，根据实际需求调整参数（如 Bucket、Region）。

回到顶部