uni-app 开发鸿蒙应用—uts实现媒体文件下载并保存到系统相册

uni-app 开发鸿蒙应用---uts实现媒体文件下载并保存到系统相册 

当前编译器版本:HBuilderX 4.26 Alpha版

 当前工程文件:template-1.3.7.tgz

uni-app 开发鸿蒙应用 | uni-app官网 (dcloud.net.cn)

目的:媒体文件下载并保存到系统相册;

实现方法:通过uts插件方式接入鸿蒙原生api,实现媒体文件下载并保存到系统相册。

难点:uts插件暂时只允许api形式导入,无法使用保存控件,且鸿蒙 'ohos.permission.WRITE_IMAGEVIDEO' 权限申请较难审核通过,决定使用保存图片api:showAssetsCreationDialog 实现。icon-default.png?t=O83Ahttps://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#showassetscreationdialog12

一、新建uts插件;

按照官网步骤新建uts插件

UTS插件介绍 | uni-app-x (dcloud.net.cn)

uni-app 开发鸿蒙应用 | uni-app官网 (dcloud.net.cn)

1. 右键 uni_modules 目录新建 uni_modules 插件,命名为 ha-downloadToSystemAlbum

2. 修改插件根目录的 package.json 中的 uni_modules 节点,新增如下配置
{
    ...其他属性
 
    "uni_modules": {
        "uni-ext-api": {
            "uni": {
                "openAppProduct": {
                    "name": "hmDownloadToSystemAlbum",
                    "app": {
                        "js": false,
                        "kotlin": false,
                        "swift": false,
                        "arkts": true
                    }
                }
            }
        },
 
        ...其他属性
    }
}

 

 3. 编写插件根目录下的 /utssdk/interface.uts 文件,内容如下
/**
 * interface.uts
 * uts插件接口定义文件,按规范定义接口文件可以在HBuilderX中更好的做到语法提示
 */
 
/**
 * myApi 异步函数的参数,在type里定义函数需要的参数以及api成功、失败的相关回调函数。
 */
export type MyApiOptions = {
    fullUrl : string,
    renameUrl : string,
    fileType : string,
    success ?: (res : MyApiResult) => void,
    fail ?: (res : string) => void,
    progress ?: (res : any) => void,
}
 
/**
 * 函数返回结果
 * 可以是void, 基本数据类型,自定义type, 或者其他类型。
 * [可选实现]
 */
export type MyApiResult = {
    fieldA : number,
    fieldB : boolean,
    fieldC : string
}
 
/**
 * 函数返回结果
 * 可以是void, 基本数据类型,自定义type, 或者其他类型。
 * [可选实现]
 */
export type MyApiFail = {
    errMessage : string
}
 
 
/* 异步函数定义 */
export type MyApi = (options : MyApiOptions) => void
 
/* 同步函数定义 */
export type MyApiSync = (fullUrl : string) => MyApiResult

 

4. 编写插件根目录下的 /utssdk/app-harmony/index.uts 文件(没有则新建),内容如下
/* 引入 interface.uts 文件中定义的变量 */
import { MyApiOptions, MyApi } from '../interface.uts';
 
import request from '@ohos.request'; // 下载
import { fileUri } from '@kit.CoreFileKit'; // 获取getUriFromPath
import { photoAccessHelper } from '@kit.MediaLibraryKit'; // 保存到相册
import fs, { ReadOptions, WriteOptions } from '@ohos.file.fs';
import dataSharePredicates from '@ohos.data.dataSharePredicates';
 
// 1.是否同意下载-->同意:获取需要保存到媒体库的位于应用沙箱的媒体uri 
// 2.文件下载-->progress:98%
// 3.已下载的沙箱文件写入已获取的媒体uri文件中-->progress:100%
 
export const hmDownloadToSystemAlbum : MyApi = async function (options : MyApiOptions) {
    let context : Context = getContext();
    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
    let filesDir = context.filesDir;
    let cfg : request.DownloadConfig = {
        url: options.fullUrl,
        filePath: filesDir + '/' + options.renameUrl,
        enableMetered: true
    }
    let downloadTask : request.DownloadTask;
 
    // 1.是否同意下载-->同意:获取需要保存到媒体库的位于应用沙箱的图片/视频uri
    try {
        let srcFileUri : string = fileUri.getUriFromPath(cfg.filePath) || '';
        let srcFileUris : Array<string> = [srcFileUri];
 
        let fileType : photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;
        if (options.fileType === 'photo') fileType = photoAccessHelper.PhotoType.IMAGE;
        if (options.fileType === 'video') fileType = photoAccessHelper.PhotoType.VIDEO;
        let photoCreationConfigs : Array<photoAccessHelper.PhotoCreationConfig> = [
            {
                title: options.renameUrl.split('.')[0] || '', // 可选-图片或者视频的标题,例如'test2'
                fileNameExtension: options.renameUrl.split('.').pop() || '', // 必填-文件扩展名,例如'jpg'
                photoType: fileType, // 必填-创建的文件类型,IMAGE或者VIDEO
                subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // 可选-图片或者视频的文件子类型,DEFAULT[默认照片类型]或者MOVING_PHOTO[动态照片文件类型]
            }
        ];
 
        let desFileUris : Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
        let URI = desFileUris[0];
 
        // 2.文件下载98%
        if (desFileUris.length > 0) {
            let progressNum : number = 0;
            options?.progress?.(progressNum);
 
            try {
                request.downloadFile(context.getApplicationContext(), cfg
                    , (err, data) => {
                        if (err) {
                            console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
                            return;
                        }
                        downloadTask = data;
 
                        // 进度条
                        let progressCallback = (receivedSize : number, totalSize : number) => {
                            // console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
                            let numA : number = Math.round((totalSize / 98));
                            let numB : number = Math.round((receivedSize / numA));
                            options?.progress?.(numB);
                        };
                        downloadTask.on('progress', progressCallback);
 
                        // 下载完成
                        downloadTask.on("complete", async () => {
                            // console.log('下载完成', JSON.stringify(options));
                            try {
                                // 判定文件是否存在
                                if (fs.accessSync(URI)) {
                                    // 删除文件
                                    fs.unlinkSync(URI)
                                }
 
                                let srcFile = fs.openSync(cfg.filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
                                let destFile = fs.openSync(URI, fs.OpenMode.READ_WRITE);
                                // 读取源文件内容并写入至目的文件
                                let bufSize = 4096;
                                let readSize = 0;
                                let buf = new ArrayBuffer(bufSize);
                                let readOptions : ReadOptions = {
                                    offset: readSize,
                                    length: bufSize
                                };
                                let readLen = fs.readSync(srcFile.fd, buf, readOptions);
                                while (readLen > 0) {
                                    readSize += readLen;
                                    let writeOptions : WriteOptions = {
                                        length: readLen
                                    };
                                    fs.writeSync(destFile.fd, buf, writeOptions);
                                    readOptions.offset = readSize;
                                    readLen = fs.readSync(srcFile.fd, buf, readOptions);
                                }
                                // 关闭文件
                                fs.closeSync(srcFile);
                                fs.closeSync(destFile);
 
                                return options?.progress?.(100);
                            } catch (e) {
                                //TODO handle the exception
                                options?.fail?.('下载失败,请重试');
                            }
                        })
                    });
            } catch (err) {
                options?.fail?.('下载失败,请重试');
                console.error('err.code : ' + err.code + ', err.message : ' + err.message);
            }
        } else {
            // 取消授权
            options?.fail?.('已取消');
        }
    } catch (err) {
        console.error('showAssetsCreationDialog failed, errCode is ' + err.code + ', errMsg is ' + err.message);
    }
}

 

 

二、接入鸿蒙原生api,实现授权、下载、保存功能;

完整代码如上 /utssdk/app-harmony/index.uts 文件

1. 调用 showAssetsCreationDialog 接口拉起保存确认弹窗,获取已创建并授予保存权限的uri列表;
2. 若同意授权,调用 request.downloadFile 下载媒体文件到沙箱路径;
3. 在下载完成回调中,将下载的沙箱文件源内容写入至目的已授权uri中。

 

三、在页面中使用

1. import 引入
 
// #ifdef APP-HARMONY
// 仅鸿蒙会编译
import {
    hmDownloadToSystemAlbum
} from "@/uni_modules/ha-downloadToSystemAlbum"
// #endif

 

2. 调用
methods: {
    downloadToSystemAlbum(payload) {
        // 下载并保存
        hmDownloadToSystemAlbum({
            fullUrl: payload.downloadUrl, // 完整下载链接
            renameUrl: payload.renameUrl, // 下载文件重命名
            fileType: payload.fileType, // 下载媒体文件类型 'photo' | 'video'
            progress: (res) => { // 下载进度条
                console.log('已下载' + res * 1 + '%');
            },
            fail: (err) => { // 下载失败
                if (err) {
                    console.log('下载失败');
                }
            },
        });
    },
}

 

文章知识点与官方知识档案匹配,可进一步学习相关知识
THE END