前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >COS SDK有Flutter和React Native版本啦

COS SDK有Flutter和React Native版本啦

作者头像
云存储
发布2023-05-18 14:40:04
7810
发布2023-05-18 14:40:04
举报
文章被收录于专栏:用户5909132的专栏

对象存储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 版本要求:

代码语言:javascript
复制
sdk: ">=2.12.0 <3.0.0" ‍flutter: ">=2.5.0"

第二步:集成 SDK 运行此命令:

代码语言:javascript
复制
flutter pub add tencentcloud_cos_sdk_plugin

第三步:开始使用

1. 初始化密钥 实现一个 IFetchCredentials 的类,实现请求临时密钥并返回结果的过程。

代码语言:javascript
复制
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 提供密钥。

代码语言:javascript
复制
Cos().initWithSessionCredential(FetchCredentials());

2. 注册 COS 服务

代码语言:javascript
复制
// 存储桶所在地域简称,例如广州地区是 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 支持上传本地文件、二进制数据。下面以上传本地文件为例:

代码语言:javascript
复制
   // 获取 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:

代码语言:javascript
复制
npm install --save react-native-cos-sdk

或者使用yarn:

代码语言:javascript
复制
yarn add react-native-cos-sdk

第三步:开始使用

1. 初始化密钥 调用 Cos 的 initWithSessionCredentialCallback 方法,实现请求临时密钥并返回结果的过程。

代码语言:javascript
复制
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 服务

代码语言:javascript
复制
// 存储桶所在地域简称,例如广州地区是 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) 。

代码语言:javascript
复制
 // 获取 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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-05-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯云存储 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档