轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS（免费额度）

概述

• 对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。
• 个人账户首次开通COS可以免费领取50GB 标准存储容量包6个月（180天）的额度。
• 本篇文章将详细介绍如何在微信小程序中使用对象存储sdk上传图片到腾讯云COS。

准备工作

初次使用 COS，建议您先了解以下基本概念：

• 存储桶（Bucket）：是对象的载体，可理解为存放对象的“容器”。一个存储桶可容纳无数个对象。
• 对象（Object）：是对象存储的基本单元，可理解为任何格式类型的数据，例如图片、文档和音视频文件等。
• 地域（Region）：是腾讯云托管机房的分布地区，对象存储 COS 的数据存放在这些地域的存储桶中。

快速入门

步骤 1-5都是前期准备（已完成的可以跳过），步骤6开始正式使用

步骤1：注册腾讯云账号

在使用腾讯云 COS 服务前，您需要先注册一个腾讯云账号。请单击下方按钮开始注册。（如果您已注册，请跳过该步骤。）

开始注册

步骤2：完成实名认证

账号注册完成后，使用该账号登录 腾讯云控制台，开始实名认证。详细操作指引请参见 实名认证介绍。（如果您已完成，请跳过该步骤。）

开始实名认证

步骤3：开通 COS 服务

在 腾讯云控制台 中，选择云产品 > 对象存储，进入 COS 控制台，按照界面提示开通 COS 服务。（如果您已开通，请跳过该步骤。）

开通 COS 服务

步骤4：创建存储桶

我们需要创建一个用于存放对象的存储桶：

1. 在 对象存储控制台 左侧导航栏中单击存储桶列表，进入存储桶管理页。
2. 单击创建存储桶，输入以下配置信息，其他配置保持默认即可。
   • 名称：输入存储桶名称。名称设置后不可修改。此处举例输入 examplebucket。
   • 所属地域：存储桶所属地域，选择与您业务最近的一个地区，例如广州地域。
   • 访问权限：存储桶访问权限，此处我们保持默认为“私有读写”。
3. 单击创建，即可创建完成。

步骤5：获取密钥

在访问管理控制台中的 API 密钥管理 页面里获取 APPID，并创建 SecretId、SecretKey。

步骤6：在小程序中使用对象存储sdk

1. 安装 SDK

安装小程序 SDK 有两种方式：手动安装和 npm 安装，具体安装方法如下。

• 手动安装
  复制源码文件中的 cos-wx-sdk-v5.js 到自己小程序代码根目录下任意路径，并用相对路径引用：
  

（自己新建一个utils文件夹和cos-wx-sdk-v5.js文件）

var COS = require('./utils/cos-wx-sdk-v5.js')

• npm 安装
  如果小程序代码使用了 webpack 打包，则通过 npm 安装依赖即可：

npm install cos-wx-sdk-v5

其中，程序代码使用 var COS = require('cos-wx-sdk-v5'); 进行引用;
我这里用的是手动安装的方法。

2. 开始使用

2.1 小程序域名白名单配置

小程序里请求 COS 需要登录到 微信公众平台，选择开发 > 开发设置 > 服务器域名，配置域名白名单。SDK 使用到了两个接口：

1. cos.postObject 使用 wx.uploadFile 方法。
2. 其他方法使用 wx.request 方法。

需要在对应白名单里，配置 COS 域名，白名单域名格式有两种：

1. 如果是标准请求，可以配置存储桶域名作为白名单域名，例如：
   examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com。
2. 如果小程序使用的存储桶多，可以选择后缀式请求 COS，只需要在 SDK 实例化时传入ForcePathStyle: true，这种方式需要配置地域域名作为白名单，例如：cos.ap-guangzhou.myqcloud.com。

把存储桶的访问域名加上

2.2 初始化

• 引入

var COS = require('./utils/cos-wx-sdk-v5.js');

• 初始化

通常情况下我们只需要创建一个 COS SDK 实例，然后在需要调用SDK方法的地方直接使用这个实例即可

var cos = new COS({....
});

2.3 配置项

• COS实例可以用多种配置项格式创建，官方列出的有4种（官方举例地址），前3种需要结合后端使用，也是官方比较推荐的使用方式。
• 为了方便，我这里的方式是第四种：前端使用固定密钥计算签名，该格式适用于前端调试，若使用此格式，请避免泄露密钥。
• 这种方式无需结合后端使用，但比较不安全。

// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({SecretId: 'SECRETID',SecretKey: 'SECRETKEY',SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用putObject,sdk版本至少需要v1.3.0
});

2.4 上传到cos

wx.chooseMedia选择图片，cos.postObject把图片上传到腾讯云COS；
关键js代码：

 /* 选择文件,得到临时路径 */uploadImg: function () {var that = this;// chooseImage已停止维护，需使用chooseMedia选择上传wx.chooseMedia({count: 9,mediaType: ['image'],sizeType: ['original'],sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success(result) {console.log(result);that.setData({imgList: result.tempFiles})// console.log(that.data.imgList);},})},// 上传到COSuploadIng: function () {for (var index in this.data.imgList) {var filePath = this.data.imgList[index].tempFilePath;var Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名，不指定的话，上传不是图片格式cos.postObject({Bucket: '', //对象储存桶的名称Region: '', //所属地域Key: 'images/' + Key, // 存储在桶里的对象键（例如:1.jpg，a/b/test.txt）我这里是上传到存储桶上的images文件夹里FilePath: filePath,onProgress: function (info) {console.log('进度条', JSON.stringify(info));}}, function (err, data) {// 这里我用的是回调函数的形式，也可以用promise方式if (err) {console.log('上传失败', err);} else {console.log('上传成功', data);}});}}

效果：

上传成功后，会返回图片地址

我们在控制台可以看到文件列表

• 如果存储桶访问权限 为 公有读私有写，我们可以在浏览器输入这个地址，即可访问到这张图片。
  
  
• 若是私有读写，则无法直接访问这个地址，需要通过调用cos.getObjectUrl 获取访问url

// 获取图片地址（在权限为私有读写情况下使用）cos.getObjectUrl({Bucket: '', //对象储存桶的名称Region: '', //所属地域Key: 'images/' + Key,}, function (err, data) {console.log('获取url',err || data);});

附：完整示例代码

关注公众号【richGirlyyy】，发消息：小程序图片云存储，即可获取demo源码；