轻松实现微信小程序上传多文件/图片到腾讯云对象存储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')
1

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

npm install cos-wx-sdk-v5
1

其中，程序代码使用 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');
1

• 初始化

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

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

1
2
3
4

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
});
1
2
3
4
5
6

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);
                }
            });
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果：

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

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

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

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

附：完整示例代码

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