门户网站设计方案社群营销

一、端侧调用云存储上传头像

云存储是一种可伸缩、免维护的云端存储服务，可用于存储图片、音频、视频或其他由用户生成的内容。借助云存储服务，您可以无需关心存储服务器的开发、部署、运维、扩容等事务，大大降低了应用使用存储的门槛，让您可以专注于应用的业务能力构建，助力您的商业成功。

云存储提供了客户端和服务端SDK，您可以使用云存储SDK为您的应用实现安全可靠的文件上传和下载服务，同时具备如下优势。

• 安全可靠：全流程使用HTTPS协议对用户的传输数据进行加密保护，并采用安全的加密协议将文件加密存储在云端。
• 断点续传：因网络原因或用户原因导致的操作中止，只需要简单地传入操作中止的位置，就可以尝试重新开始该操作。
• 可伸缩：提供EB级的数据存储，解决海量数据存储的难题。
• 易维护：通过简单的判断返回异常就可以定位出错误原因，定位快捷方便。

云存储模块提供使用云存储对文件进行上传、下载、查询和删除等操作能力。以上传宝宝头像为例，端侧调用云存储需要以下操作步骤：

1）引入云存储模块

import {cloudStorage} from '@kit.CloudFoundataionKit';
import { BusinessError, request } from '@kit.BasicServicesKit';

2）初始化云存储实例

const bucket: cloudStorage.StorageBucket = cloudStorage.bucket();

3）调用云存储上传接口，上传图片

bucket.uploadFile(getContext(this), {localPath: cacheFilePath,cloudPath: cloudPath
})

4）调用云存储获取图片地址接口

bucket.getDownloadURL(cloudPath).then((downloadURL: string) => {this.imageUrl = downloadURL;
})

完整代码：

import { cloudFunction, cloudDatabase, cloudStorage } from '@kit.CloudFoundationKit';
import { BusinessError, request } from '@kit.BasicServicesKit';
import { SymbolGlyphModifier } from '@kit.ArkUI';import { Feeding } from '../model/Feeding';
import { fileIo } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';const bucket: cloudStorage.StorageBucket = cloudStorage.bucket();
type UploadCompleteCallback = (uploadSuccess: boolean) => void;interface BabyAge {years: number;months: number;days: number;totalDays: number;
}interface ResponseBody {code: number;desc: string;data: BabyAge
}@Entry
@Component
struct Index {controller: SearchController = new SearchController();@State birthday: string = "";@State callFunctionResult: BabyAge | undefined = undefined;currentDateTime: Date = new Date();condition: cloudDatabase.DatabaseQuery<Feeding> = new cloudDatabase.DatabaseQuery(Feeding);private databaseZone = cloudDatabase.zone("default");@State allFeedingList: Feeding[] = [];@State feeding: Feeding = new Feeding();@State isFeeding: boolean = false;@State startTime: Date = new Date();@State imageUrl: string | ResourceStr = $r('app.media.empty_image');// 查询当前喂养记录信息async queryAllFeeding() {try {// 构建查询条件const queryCondition = this.condition.greaterThanOrEqualTo("startTime", this.currentDateTime.setHours(0, 0, 0, 0)).and().lessThanOrEqualTo("startTime", this.currentDateTime.setHours(23, 59, 59, 999));const result = await this.databaseZone.query(queryCondition);if (result.length > 0) {this.allFeedingList = result;}} catch (error) {// 异常处理this.allFeedingList = [];}}// 新增喂养记录async insertFeeding(feeding: Feeding) {await this.databaseZone.upsert(feeding);await this.queryAllFeeding();}// 删除数据async deleteFeeding(feeding: Feeding) {try {await this.databaseZone.delete(feeding);await this.queryAllFeeding();} catch (error) {const err: BusinessError = error;this.getUIContext().getPromptAction().showToast({message: err.message})}}async aboutToAppear(): Promise<void> {this.queryAllFeeding();}build() {Column({ space: 10 }) {Text("请先设置宝宝出生日期").fontColor(Color.Grey).height(54)Search({ controller: this.controller, value: this.birthday }).width('90%').height('54vp').searchIcon(new SymbolGlyphModifier($r('sys.symbol.calendar_badge_play')).fontColor([Color.Grey]).fontSize('30fp')).cancelButton({style: CancelButtonStyle.INVISIBLE}).borderRadius('8vp').onClick(() => {CalendarPickerDialog.show({selected: new Date(this.birthday),acceptButtonStyle: {style: ButtonStyleMode.EMPHASIZED},cancelButtonStyle: {fontColor: Color.Grey},onAccept: async (value) => {this.birthday = value.toLocaleDateString();console.info("calendar onAccept:" + JSON.stringify(value))let result: cloudFunction.FunctionResult = await cloudFunction.call({name: 'calculate-baby-age',version: '$latest',timeout: 10 * 1000,data: {birthday: this.birthday}});let body = result.result as ResponseBody;this.callFunctionResult = body.data;}})})if (this.callFunctionResult !== undefined) {Row() {Column({ space: 8 }) {Image(this.imageUrl).width(64).height(64).borderRadius(16).onClick(() => {this.upLoadImage();})Text(`我已经${this.callFunctionResult.years}岁了 ${this.callFunctionResult.months}月 ${this.callFunctionResult.days}天了～`)Text(`我已经出生${this.callFunctionResult.totalDays}天了～`)}.width('100%')}.width('90%')Button(`${this.isFeeding ? '停止喂养' : '开始喂养'}`).backgroundColor(this.isFeeding ? Color.Orange : Color.Green).onClick(async () => {this.isFeeding = !this.isFeeding;if (this.isFeeding) {this.startTime = new Date();this.feeding.id = this.allFeedingList.length + 1;this.feeding.startTime = this.startTime;} else {this.feeding.totalDuration = new Date().getTime() - this.startTime.getTime();await this.insertFeeding(this.feeding);}})if (this.allFeedingList.length > 0) {List() {ForEach(this.allFeedingList, (item: Feeding) => {ListItem() {Column({ space: 8 }) {Row() {Text(`${item.type}喂养`)Text(`${item.startTime.toLocaleDateString()}`)}.width('100%').height(32).justifyContent(FlexAlign.SpaceBetween)Text(`总喂养时长：${item.totalDuration >= (60 * 1000) ? (item.totalDuration / (60 * 1000)) + 'm' : (item.totalDuration / 1000) + 's'}`).width('100%').height(32)Row() {Button("删除").onClick(async () => {this.getUIContext().getPromptAction().showDialog({title: '温馨提示',message: '确定要删除该喂养记录吗？',buttons: [{text: '取消',color: '#D3D3D3'},{text: '确定',color: '#FF5277'}],}).then(async data => {console.info('showDialog success, click button: ' + data.index);if (data.index === 1) {await this.deleteFeeding(item);}}).catch((err: Error) => {console.info('showDialog error: ' + err);})})}.width('100%')}.backgroundColor(0xf2f2f2).padding(12).borderRadius(8)}})}.width('90%').height(450).divider({strokeWidth: 2,color: Color.White})}}}.width('100%').height('100%')}private upLoadImage() {this.selectImage().then((selectImageUri: string) => {if (!selectImageUri) {return;}this.initStates();// copy select file to cache directoryconst fileName = selectImageUri.split('/').pop() as string;const cacheFilePath = `${getContext().cacheDir}/${fileName}`;this.copyFile(selectImageUri, cacheFilePath);const cloudPath = `default-bucket-lg41j/image_${new Date().getTime()}.jpg`;bucket.uploadFile(getContext(this), {localPath: cacheFilePath,cloudPath: cloudPath}).then(task => {// add task event listenerthis.addEventListener(task, this.onUploadCompleted(cloudPath, cacheFilePath));// start tasktask.start().catch((err: BusinessError) => {});}).catch((err: BusinessError) => {});}).catch((err: Error) => {});}private async selectImage(): Promise<string> {return new Promise((resolve: (selectUri: string) => void, reject: (err: Error) => void) => {const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();// 过滤选择媒体文件类型为IMAGEphotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber = 1;new photoAccessHelper.PhotoViewPicker().select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {resolve(photoSelectResult.photoUris[0]);}).catch((err: Error) => {reject(err);});});}private addEventListener(task: request.agent.Task, completeCallback: UploadCompleteCallback) {task.on('progress', (progress) => {});task.on('completed', (progress) => {completeCallback(true);});task.on('response', (response) => {});task.on('failed', (progress) => {completeCallback(false);});}private onUploadCompleted(cloudPath: string, cacheFilePath: string) {return (uploadSuccess: boolean) => {if (uploadSuccess) {bucket.getDownloadURL(cloudPath).then((downloadURL: string) => {this.imageUrl = downloadURL;}).catch((err: BusinessError) => {});}// delete cache file when task finishedfileIo.unlink(cacheFilePath).catch((err: BusinessError) => {});};}private copyFile(src: string, dest: string) {const srcFile = fileIo.openSync(src);const dstFile = fileIo.openSync(dest, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);fileIo.copyFileSync(srcFile.fd, dstFile.fd);fileIo.closeSync(srcFile);fileIo.closeSync(dstFile);}private initStates() {this.imageUrl = $r('app.media.empty_image');}
}

二、课程总结

通过十小节课程的学习，相信大家已经完全掌握了端云一体化开发流程，能够独立完成云函数开发、调试、部署、以及调用，独立完成云数据库设计、开发、部署、以及调用，以及云存储的端侧调用。