网站制作排名,wordpress portfolio 插件,网站建设与维护是什么,app用什么制作软件概述
对象存储#xff08;Cloud Object Storage#xff0c;COS#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务#xff0c;用户可通过网络随时存储和查看数据。个人账户首次开通COS可以免费领取50GB 标准存储容量包6个月#xff08;180天#xff09;的额度。…概述
对象存储Cloud Object StorageCOS是腾讯云提供的一种存储海量文件的分布式存储服务用户可通过网络随时存储和查看数据。个人账户首次开通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.jpga/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源码
