对象存储COS简介
对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。
COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入,实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面,同时遍布全国范围的 CDN 节点可以对文件下载进行加速。
导语
Flutter 和 React Native 是目前最流行的跨平台框架,经过了时间的考验,也有成熟的团队在SDK、文档、社区等方面进行支持。
相对于传统的原生开发,跨平台方案在开发测试成本、产品一致性等方面有一定的优势。但是有时候使用第三方库时只有原生库,没有对应的 Flutter 和 React Native 库,这时候往往需要自行桥接,桥接会有一定的开发成本。现在我们 COS SDK 官方提供了 Flutter 和 React Native 的 SDK,用户按照官方文档直接接入即可。
Flutter 和 React Native COS SDK简介
Flutter 和 React Native 的 COS SDK 根据桥接已有的 Android COS SDK 和 iOS COS SDK 实现,核心逻辑和原生 COS SDK 保持一致。目前 SDK 已支持 Android 平台 和 iOS 平台,Windows/macOS/Linux 平台将通过后续桥接 C++ COS SDK 实现。
Flutter SDK 集成和使用
第一步:准备工作 1. 您需要一个纯 Flutter 项目或 Flutter 原生混合项目,这个应用可以是您现有的工程,也可以是您新建的一个空的工程。 2. Flutter 版本要求:
sdk: ">=2.12.0 <3.0.0" flutter: ">=2.5.0"
第二步:集成 SDK 运行此命令:
flutter pub add tencentcloud_cos_sdk_plugin
第三步:开始使用
1. 初始化密钥 实现一个 IFetchCredentials 的类,实现请求临时密钥并返回结果的过程。
class FetchCredentials implements IFetchCredentials{ @override Future<SessionQCloudCredentials> fetchSessionCredentials() async { // 首先从您的临时密钥服务器获取包含了密钥信息的响应,例如: var httpClient = HttpClient(); try { // 临时密钥服务器 url var stsUrl = "http://stsservice.com/sts"; var request = await httpClient.getUrl(Uri.parse(stsUrl)); var response = await request.close(); if (response.statusCode == HttpStatus.OK) { var json = await response.transform(utf8.decoder).join(); print(json);
// 然后解析响应,获取临时密钥信息 var data = jsonDecode(json); // 最后返回临时密钥信息对象 return SessionQCloudCredentials( secretId: data['credentials']['tmpSecretId'],// 临时密钥 SecretId secretKey: data['credentials']['tmpSecretKey'],// 临时密钥 SecretKey token: data['credentials']['sessionToken'],// 临时密钥 Token startTime: data['startTime'],//临时密钥有效起始时间,单位是秒 expiredTime: data['expiredTime']//临时密钥有效截止时间戳,单位是秒 ); } else { throw ArgumentError(); } } catch (exception) { throw ArgumentError(); } }}
这里假设类名为 FetchCredentials。初始化一个实例,来给 SDK 提供密钥。
Cos().initWithSessionCredential(FetchCredentials());
2. 注册 COS 服务
// 存储桶所在地域简称,例如广州地区是 ap-guangzhouString region = "COS_REGION";// 创建 CosXmlServiceConfig 对象,根据需要修改默认的配置参数CosXmlServiceConfig serviceConfig = CosXmlServiceConfig( region: region, isDebuggable: true, isHttps: true,);// 注册默认 COS ServiceCos().registerDefaultService(serviceConfig);
// 创建 TransferConfig 对象,根据需要修改默认的配置参数// TransferConfig 可以设置智能分块阈值 默认对大于或等于2M的文件自动进行分块上传,可以通过如下代码修改分块阈值TransferConfig transferConfig = TransferConfig( forceSimpleUpload: false, enableVerification: true, divisionForUpload: 2097152, // 设置大于等于 2M 的文件进行分块上传 sliceSizeForUpload: 1048576, //设置默认分块大小为 1M);// 注册默认 COS TransferMangerCos().registerDefaultTransferManger(serviceConfig, transferConfig);
第四步:访问 COS 服务 以下用上传对象来示例,其他下载、删除、桶操作等更多详细使用,请参考 Flutter COS SDK网址(https://cloud.tencent.com/document/product/436/86294) 。 SDK 支持上传本地文件、二进制数据。下面以上传本地文件为例:
// 获取 TransferManager CosTransferManger transferManager = Cos().getDefaultTransferManger(); // 存储桶名称,由 bucketname-appid 组成,appid 必须填入,可以在 COS 控制台查看存储桶名称。https://console.cloud.tencent.com/cos5/bucket String bucket = "examplebucket-1250000000"; String cosPath = "exampleobject"; //对象在存储桶中的位置标识符,即称对象键 String srcPath = "本地文件的绝对路径"; //本地文件的绝对路径 //开始上传 TransferTask transferTask = await transferManager.upload(bucket, cosPath, filePath: srcPath );
其他 示例 Demo网址:https://github.com/TencentCloud/cos-sdk-flutter-plugin/tree/main/example Pub 地址网址:https://pub.flutter-io.cn/packages/tencentcloud_cos_sdk_plugin
React Native SDK 集成和使用
第一步:准备工作 1. 您需要一个纯 React Native 项目或 React Native 原生混合项目,这个应用可以是您现有的工程,也可以是您新建的一个空的工程。 2. React Native 版本要求:0.69.7 及以上 第二步:集成 SDK 使用npm:
npm install --save react-native-cos-sdk
或者使用yarn:
yarn add react-native-cos-sdk
第三步:开始使用
1. 初始化密钥 调用 Cos 的 initWithSessionCredentialCallback 方法,实现请求临时密钥并返回结果的过程。
import Cos from 'react-native-cos-sdk';
Cos.initWithSessionCredentialCallback(async () => { // 首先从您的临时密钥服务器获取包含了密钥信息的响应,例如: // 临时密钥服务器 url let stsUrl = "http://stsservice.com/sts"; const response = await fetch(stsUrl); // 然后解析响应,获取临时密钥信息 const responseJson = await response.json(); const credentials = responseJson.credentials; const startTime = responseJson.startTime; const expiredTime = responseJson.expiredTime; const sessionCredentials = { tmpSecretId: credentials.tmpSecretId, tmpSecretKey: credentials.tmpSecretKey, startTime: startTime, expiredTime: expiredTime, sessionToken: credentials.sessionToken }; console.log(sessionCredentials); // 最后返回临时密钥信息对象 return sessionCredentials;})
2. 注册 COS 服务
// 存储桶所在地域简称,例如广州地区是 ap-guangzhoulet region = "COS_REGION";// 创建 CosXmlServiceConfig 对象,根据需要修改默认的配置参数let serviceConfig = { region: region, isDebuggable: true, isHttps: true,};// 注册默认 COS Servicelet cosService = await Cos.registerDefaultService(serviceConfig);// 获取默认 COS Servicelet cosService1 = Cos.getDefaultService();
// 创建 TransferConfig 对象,根据需要修改默认的配置参数// TransferConfig 可以设置智能分块阈值 默认对大于或等于2M的文件自动进行分块上传,可以通过如下代码修改分块阈值let transferConfig = { forceSimpleUpload: false, enableVerification: true, divisionForUpload: 2097152, // 设置大于等于 2M 的文件进行分块上传 sliceSizeForUpload: 1048576, //设置默认分块大小为 1M};// 注册默认 COS TransferMangerlet cosTransferManger = await Cos.registerDefaultTransferManger(serviceConfig, transferConfig);// 获取默认 COS TransferMangerlet cosTransferManger1 = Cos.getDefaultTransferManger();
第四步:访问 COS 服务 以下用上传对象来示例,其他下载、删除、桶操作等更多详细使用,请参考 React Native COS SDK网址(https://cloud.tencent.com/document/product/436/86696) 。
// 获取 CosTransferManger let cosTransferManger: CosTransferManger = Cos.getDefaultTransferManger(); //let cosTransferManger: CosTransferManger = Cos.getTransferManger(newRegion); // 存储桶名称,由 bucketname-appid 组成,appid 必须填入,可以在 COS 控制台查看存储桶名称。https://console.cloud.tencent.com/cos5/bucket let bucket = "examplebucket-1250000000"; let cosPath = "exampleobject"; //对象在存储桶中的位置标识符,即称对象键 let srcPath = "本地文件的路径"; //本地文件的路径 //开始上传 let transferTask:TransferTask = await cosTransferManger.upload( bucket, cosPath, srcPath );
其他 示例Demo网址:https://github.com/TencentCloud/cos-sdk-react-native-plugin/tree/main/example NPM 地址网址:https://www.npmjs.com/package/react-native-cos-sdk
总结
了解 Flutter 和 React Native SDK 的更多信息,请参考官方文档: Flutter SDK网址:https://cloud.tencent.com/document/product/436/86294 React Native SDK网址:https://cloud.tencent.com/document/product/436/86696