HarmonyOS鸿蒙Next中快速集成华为AGC云存储服务-Web

HarmonyOS鸿蒙Next中快速集成华为AGC云存储服务-Web 华为AppGallery Connect提供了一个云存储（CloudStorage）的服务，号称提供了一个便捷的云端存储服务，应用开发者使用的时候，可以不用关注服务器的部署，直接使用就行。

这个服务近期上线了Web端的JavaScript的SDK，我抢先体验试用了一下。也可以下载codelab或者demo自行研究。

环境与应用信息

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

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

集成SDK命令：npm install --save [@agconnect](/user/agconnect)/cloudstorage

在AGC上开通云存储

PS：云存储服务目前还处于beta状态，使用前应该发邮件去申请开通：

https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-apply

安装开发环境

1. 安装Intellij IDEA

下载地址：https://www.jetbrains.com/idea/download/#section=windows

安装的时候，记得选for web的IntelliJ IDEA Ultimate

2. 创建vue项目

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

SDK集成

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

   npm install --save [@agconnect](/user/agconnect)/cloudstorage
   

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

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

   注意添加export参数

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

功能开发

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="" :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>
      <el-table-column 
        width="100px" 
        label="type">
        <template v-slot="scope">
          {{ scope.row.isFile ? 'file' : 'directory' }}
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        label="name"
        prop="name"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column 
        label="operation">
        <template v-slot="scope">
          <el-button
            v-if="!scope.row.isFile"
            type="success"
            size="medium"
            @click="getFileList(scope.row)">
            Get FileList
          </el-button>
          <el-button
            v-if="!scope.row.isFile"
            type="success"
            size="medium"
            @click="getFileListAll(scope.row)">
            Get FileList All
          </el-button>
          <el-button
            v-if="scope.row.isFile"
            type="success"
            size="medium"
            @click="downloadFile(scope.row)">
            Download File
          </el-button>
          <el-button
            v-if="scope.row.isFile"
            type="success"
            size="medium"
            @click="getFileMetadata(scope.row)">
            Get FileMetadata
          </el-button>
          <el-button
            v-if="scope.row.isFile"
            type="success"
            size="medium"
            @click="updateFileMetadata(scope.row)">
            Update FileMetadata
          </el-button>
          <el-button 
            v-if="scope.row.isFile" 
            type="danger" 
            size="medium" 
            @click="deleteFile(scope.row)">
            Delete File
          </el-button>
          <el-button 
            type="success" 
            size="medium" 
            @click="toString(scope.row)">
            To String
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

b) 添加配置依赖 & 初始化

1. 在script标签下，添加编译依赖

import agconnect from "[@agconnect](/user/agconnect)/api";
import "[@agconnect](/user/agconnect)/instance";
import "[@agconnect](/user/agconnect)/auth";
import "[@agconnect](/user/agconnect)/cloudstorage";

1. 初始化SDK：

import { agConnectConfig } from "../agConnectConfig";
const config = agConnectConfig;

c) 前置方法：数据与匿名登录

1. 在export default对象内，添加data对象，并且配置如下内容：

data(){
  return {
    list:[],
    isLogin:false,
    ref:{}
  }
},

1. 在export default对象内，添加对mounted对象，并且配置如下内容：

mounted(){
  agconnect.instance().configInstance(config)
}

1. 添加主要方法：在export default对象内添加methods对象，并且添加匿名登录方法：

methods:{
  async signInAnonymously () {
    agconnect
      .auth()
      .signInAnonymously()
      .then(() => {
        alert('login successfully!')
        this.isLogin = true
        this.ref = agconnect.cloudStorage().storageReference()
      })
      .catch(() => {
        return Promise.reject('sign in anonymously failed')
      })
  }
}

d) 上传文件

在methods对象内，添加如下上传文件的方法：

uploadFile(file) {
  const path = 'jssdk/' + file.name
  const metadata = {
    cacheControl: 'helloworld',
    contentDisposition: 'helloworld',
    contentEncoding: 'helloworld',
    contentLanguage: 'helloworld',
    contentType: 'helloworld',
    customMetadata: {
      hello: 'kitty'
    }
  }
  const uploadTask = this.ref.child(path).put(file.raw, metadata)
  this.printUploadPercent(uploadTask)
},
printUploadPercent(uploadTask) {
  uploadTask.on('state_changed', function(snapshot) {
    if (!snapshot){
      console.log('Upload Result is null')
      return;
    }
    if (snapshot.totalByteCount == 0){
      console.log('Upload File is empty')
      return;
    }
    var progress = (snapshot.bytesTransferred / snapshot.totalByteCount) * 100
    console.log('Upload is ' + progress.toFixed(1) + '% done')
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused')
        break
      case 'running':
        console.log('Upload is running')
        break
      case 'success':
        console.log('Upload is success')
        break
      case 'canceled':
        console.log('Upload is canceled')
        break
      case 'error':
        console.log('Upload is error')
        break
    }
  }, function(snapshot) {
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused')
        break
      case 'running':
        console.log('Upload is running')
        break
      case 'success':
        console.log('Upload is success')
        break
      case 'canceled':
        console.log('Upload is canceled')
        break
      case 'error':
        console.log('Upload is error')
        break
    }
  }, function() {
    console.log('Upload is success')
  })
}

e) 下载文件

在methods对象内，添加如下下载文件的方法：

downloadFile(row) {
  const child = this.ref.child(row.path)
  child.getDownloadURL()
    .then(function(downloadURL) {
      alert(downloadURL)
      console.log(downloadURL)
    })
}

f) 例举文件，其余功能暂不列举

在methods对象内，添加如下例举文件的方法：

getFileList(row) {
  const path = row && row.path ? row.path : ''
  const child = this.ref.child(path)
  child.list({ maxResults: 5 })
    .then((res) => {
      this.list = [...res.dirList.map(item => {
        item.isFile = false;
        item.select = false;
        return item
      }), ...res.fileList.map(item => {
        item.isFile = true;
        item.select = false;
        return item
      })]
      this.nextMarker = res.pageMarker
      console.log(this.list)
    })
    .catch(err => {
      console.log(err)
    })
}