概述

对象存储（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：创建存储桶

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

在对象存储控制台左侧导航栏中单击存储桶列表，进入存储桶管理页。
单击创建存储桶，输入以下配置信息，其他配置保持默认即可。
- 名称：输入存储桶名称。名称设置后不可修改。此处举例输入 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);},})},// 上传到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源码；

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

spring boot接收微信小程序上传的文件
spring boot接收微信小程序上传的文件,首先前台传给我们后端的不是一个路径,而是以一个文件类型传递给我,这时我们在controller层接收时就可以用MultipartFile进行接收,如果接 ...
微信小程序上传多个图片
在实际开发中,很多时候都需要要上传图片,但是对于上传多张时需要一张张的上传,因为图片都可能比较大,这时就需要我们对上传图片的API进行进一步的处理,这样就解决了我们同时选择上传多张图片需求.所以为了方 ...
微信小程序上传Excel文件并分析上传值数据库
#一.在云函数文件夹以命令窗口打开运行npm install node-xlsx #二.在云函数js文件中程序如下: // 云函数入口文件 const cloud = require('wx-serv ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传后进行性手机扫码阅览发现白屏的解决
目录问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 ...

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

概述