概述
- 对象存储（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 服务。（如果您已开通，请跳过该步骤。）
步骤4：创建存储桶
我们需要创建一个用于存放对象的存储桶：
- 在 对象存储控制台 左侧导航栏中单击存储桶列表，进入存储桶管理页。
- 单击创建存储桶，输入以下配置信息，其他配置保持默认即可。
- 名称：输入存储桶名称。名称设置后不可修改。此处举例输入 examplebucket。
- 所属地域：存储桶所属地域，选择与您业务最近的一个地区，例如广州地域。
- 访问权限：存储桶访问权限，此处我们保持默认为“私有读写”。
- 单击创建，即可创建完成。
步骤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 使用到了两个接口：
- cos.postObject 使用 wx.uploadFile 方法。
- 其他方法使用 wx.request 方法。
需要在对应白名单里，配置 COS 域名，白名单域名格式有两种：
- 如果是标准请求，可以配置存储桶域名作为白名单域名，例如：
examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com。 - 如果小程序使用的存储桶多，可以选择后缀式请求 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);
},
})
},
// 上传到COS
uploadIng: 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源码；
扫一扫
3105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
