目前华为 AGC云存储服务已经支持在快应用中集成了，你可以使用云存储服务存储图片、视频、音频等，集成的Demo可以 参考Github。

1 、安装Node.js 环境：

1 、下载Node.js 安装包：https://nodejs.org/en/download/

2 、Window 环境安装Node.js

3 、安装好以后，系统会弹出一个cmd 框提示你自动安装所需的插件

2 、检查PATH 环境变量内是否配置了NodeJS ：

1 、我的电脑 –  右键选择属性 –  选择高级系统设置 –  选择环境变量 –  查看系统变量

       在系统变量界面选择Path ：查看是否有安装的NodeJS 路径：

2 、查看NodeJS 版本；  查看npm 版本

3 、安装快应用IDE 并且配置环境

1 、下载并且安装快应用IDE ，与快应用加载器

       https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-installtool

2 、IDE 操作：  在IDE 创建一个快应用项目：

3 、点击 Npm >  启动第三方NPM 库，此时IDE 会自动向项目中添加fa-toolkit 以及package.json 。

4 、SDK 集成

1 、下载agconnect-services.json 文件，并且放到src 目录下

2 、执行npm 命令，添加云存储依赖项：npm install --save @agconnect/cloudstorage

3 、安装依赖，点击IDE 菜单“Npm >  安装依赖”

5 、功能开发

a)  界面设计与前置步骤

1 、在src/manifest.json 文件中，features 下添加system.media 依赖，用于获取本地文件

{
  "name": "system.media"
}

2 、在src/Hello/hello.ux 文件中，添加登录按钮，并且添加匿名登录的相关代码：

3 、点击IDE 菜单“文件 >  新建页面”，页面路径为“Main ”，页面文件名为“index ”，添加界面布局。

可以按照下图进行UI 设计。

b)  创建引用

1 、src/app.ux 文件中，添加编译依赖配置和onCreate 函数下初始化agc

<script>
import agconnect from "@agconnect/api";
  import "@agconnect/cloudstorage";
 
  module.exports = {
    onCreate() {
      console.info('Application onCreate');
      let agConnectConfig = require('./agconnect-services.json');
      agconnect.instance().configInstance(agConnectConfig);
    },
    onDestroy() {
      console.info('Application onDestroy');
    },
    dataApp: {
      localeData: {}
    },
    agc: agconnect
  }
</script>

c)  上传文件

putFile 为上述UI 中putFile 按钮绑定函数，可根据自身设计代码调整。

putFile() {
  let that = this;
  media.pickFile({
    success: function (data) {
      console.log("handling success: " + data.uri);
      let agconnect = that.$app.$def.agc;
      let ref = agconnect.cloudStorage().storageReference();
      let path = that.currentPath + that.getName(data.uri);
      const child = ref.child(path);
      child.put4QuickApp(data.uri, {
        cacheControl: 'helloworld',
        contentDisposition: 'helloworld',
        contentEncoding: 'helloworld',
        contentLanguage: 'helloworld',
        contentType: 'helloworld',
        customMetadata: {
          hello: 'kitty'
        }
      }).then((res) => {
        that.result = JSON.stringify(res, null, "\t");
        prompt.showToast({
          message: `putFile success`,
          duration: 3500,
          gravity: 'center'
        });
      })
    },

d)  获取文件列表

getList 、getListAll 为上述UI 中对应按钮的绑定函数，可根据自身设计代码调整。

getList() {
  let agconnect = this.$app.$def.agc;
  let ref = agconnect.cloudStorage().storageReference();
  let path = this.selected === '' ? this.currentPath : this.selected;
  const child = ref.child(path);
  child.list({ maxResults: 10 }).then((res) => {
    this.currentPath = path;
    this.selected = '';
    this.setList(res);
  })
},
getListAll() {
  let agconnect = this.$app.$def.agc;
  let ref = agconnect.cloudStorage().storageReference();
  let path = this.selected === '' ? this.currentPath : this.selected;
  const child = ref.child(path);
  child.listAll().then((res) => {
    this.currentPath = path;
    this.selected = '';
    this.setList(res);
  })
},

e)  获取文件下载地址

getDownloadURL 为上述UI 中对应按钮的绑定函数，可根据自身设计代码调整。

getDownloadURL() {
  if (this.selected === '' || this.selected.endsWith('/')) {
    prompt.showToast({
      message: `only file can getDownloadURL`,
      duration: 3500,
      gravity: 'center'
    });
    return;
  }
  let agconnect = this.$app.$def.agc;
  let ref = agconnect.cloudStorage().storageReference();
  const child = ref.child(this.selected);
  child.getDownloadURL().then((res) => {
    this.result = res;
    prompt.showToast({
      message: `getDownloadURL success`,
      duration: 3500,
      gravity: 'center'
    });
  })
}

5 、现象与验证

在快应用IDE 中间点击Run ， 运行该快应用 ， 可以在右侧查看相应的效果

6 、总结

CloudStorage 之前的 JS SDK ，已经无缝支持华为快应用，多场景的覆盖更加全面。另外在快应用的使用上方便快捷， API 接口齐全满足各种使用情况，

详细开发指南： https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-getstarted-quickapp

云存储快应用 Demo ：

https://github.com/AppGalleryConnect/agc-demos/tree/main/Quickapp/CloudStorage

原文链接： https://developer.huawei.com/consumer/cn/forum/topic/0203477576229380396?fid=0101271690375130218

原作者：Mayism