快速集成华为AGC云存储服务-Web

华为开发者论坛

于 2021-02-20 10:35:26 发布

阅读量2.9w

点赞数 2

CC 4.0 BY-SA版权

文章标签：云存储 AGC

本文链接：https://blog.csdn.net/weixin_44708240/article/details/113876410

本文档介绍了如何快速集成华为AppGallery Connect的云存储服务到Web项目中，包括环境配置、SDK安装、功能开发如上传、下载文件等。详细步骤包括在AGC开通云存储服务、安装IntelliJ IDEA、创建Vue项目，以及验证功能等。通过集成，开发者可以方便地在Web应用中实现云端文件操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

华为AppGallery Connect提供了一个云存储（CloudStorage）的服务，号称提供了一个便捷的云端存储服务，应用开发者使用的时候，可以不用关注服务器的部署，直接使用就行。
这个服务近期上线了Web端的JavaScript的SDK，我抢先体验试用了一下。也可以下载codelab或者demo自行研究。

1、环境与应用信息

版本名称	集成环境-应用	测试设备
“cloudstorage”: “1.0.0”	Window-Node-v14.15.0 npm v6.14.8 Intellij + Vue	PC-Chrome

环境：https://developer.huawei.com/consumer/rn/service/josp/agc/index.html

SDK版本："@agconnect/cloudstorage": “^1.0.0-beta3”

集成SDK命令：npm install --save @agconnect/cloudstorage

2、在AGC上开通云存储:

PS：云存储服务目前还处于beta状态，使用前应该发邮件去申请开通：
https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-apply

在我的项目 下选择你的开发项目，在构建下面，找到云存储服务，点击开通：

没有Web项目的话，需要先自己创建一个。

在这里插入图片描述

开通服务的时候，需要先配置存储实例，这里按需配置就可以，我就随便配置一个。

在这里插入图片描述

下一步，还需要配置安全策略，这里使用默认的安全策略就好:
PS：默认的情况是，只有经过身份认证的用户才能进行读写。

在这里插入图片描述

3、安装开发环境:

1、安装Intellij IDEA：

下载地址：https://www.jetbrains.com/idea/download/#section=windows
安装的时候，记得选for web的 IntelliJ IDEA Ultimate

2、创建vue项目

在这里插入图片描述

3、编译完成后，生成以下文件：

在这里插入图片描述

4、SDK集成

1、打开命令行窗口，进入到项目目录下，在项目目录下执行以下命令，安装云存储的JS SDK:

npm install --save @agconnect/cloudstorage

在这里插入图片描述

安装云存储的JS SDK后，会自动匹配AGC SDK，无需额外安装。

2、应用级src目录下创建名为 “agConnectConfig.js” 的文件，并且将AGC界面上“项目设置 > SDK代码片段”中所有内容复制到“agConnectConfig.js”里

注意添加export 参数

在这里插入图片描述

3、在项目路径下执行npm install命令安装 package.json 依赖。

5、功能开发

a) 页面布局-新建一个

1、新建一个Page.vue文件，在template便签下添加如下代码布局

在这里插入图片描述

<div class = "hello">
   <div v-show="!isLogin">
     <el-button type="primary" @click="signInAnonymously">Login</el-button>
   </div>
   <div v-show="isLogin" style="max-width:1600px;margin:auto;">
     <h1>AGCCloudStorageDemo</h1>
     <div style="display:flex;margin-bottom:30px;">
       <el-button type="primary" size="medium" @click="getFileList('')">Get FileList</el-button>
       <el-button type="primary" size="medium" @click="getFileListAll('')">
         Get FileList All
       </el-button>
       <el-button type="primary" size="medium" @click="uploadString">
         Upload String
       </el-button>
       <el-upload action :on-change="uploadFile" :auto-upload="false">
         <el-button type="primary" size="medium" style="width: 100%;margin-left:10px;">Upload File</el-button>
       </el-upload>
     </div>
     <el-table
         ref="multipleTable"
         border
         size="medium"
         :data="list">
       <el-table-column
           type="selection"
           width="55">
       </el-table-column>
       <el-table-column width="80px" label="index">
         <template v-slot="scope">
           {
   {
    scope.$index + 1 }}
         </template>
       </el-table-column>

最低0.47元/天解锁文章