【鸿蒙实战开发】图片选择和下载保存案例

最新推荐文章于 2025-09-01 15:25:30 发布

原创

最新推荐文章于 2025-09-01 15:25:30 发布 · 650 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ui #鸿蒙 #缓存

本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。

效果图预览

使用说明

从主页通用场景集里选择图片选择和下载保存进入首页。
分两个场景

点击“+”进入”访问手机相册图片预览并选择”场景示例。
点击上部“下载”按钮进入”下载网络图片到手机相册”场景示例；点击下部“下载到指定路径”按钮进入”下载文件到指定用户目录”场景示例。

实现思路

场景1：访问手机相册图片预览并选择

通过photoViewPicker.select()拉起图库界面，用户可以预览并选择一个或多个文件，即可实现拉起手机相册并进行图片的预览与选择。

1.创建文件类型为图片的，并最大预览数量为2的图库实例。

async getFileAssetsFromType(){

    const photoSelectOptions = new picker.PhotoSelectOptions(); // 创建图库对象实例

    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件类型为Image

    photoSelectOptions.maxSelectNumber = 2; // 选择媒体文件的最大数目

}

2.通过photoViewPicker.select()接口,通过传入参数PhotoSaveOptions图库对象，获取返回的用户选择的图片信息。

async getFileAssetsFromType(){

    photoViewPicker.select(photoSelectOptions)

        .then((photoSelectResult) => {

            this.uris = photoSelectResult.photoUris; // select返回的uri权限是只读权限，需要将uri写入全局变量@State中即可根据结果集中的uri进行读取文件数据操作。

        })

        .catch((err: BusinessError) => {

            console.log('Invoke photoViewPicker.select failed, code is ${err.code},message is ${err.message}');

        })

}

场景2：下载并保存网络图片

1.通过http中request方法获取在线图片数据。

http.createHttp()

    .request('https://gitee.com/openharmony/applications_app_samples/raw/master/code/Solutions/Shopping/OrangeShopping/feature/navigationHome/src/main/resources/base/media/product002.png',

        (error: BusinessError, data: http.HttpResponse) => {

            if (error) {

                promptAction.showToast({

                 &nbs