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 实现。

https://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 节点，新增如下配置

1. {
2.         ...其他属性
4.         "uni_modules": {
5.                 "uni-ext-api": {
6.                         "uni": {
7.                                 "openAppProduct": {
8.                                         "name": "hmDownloadToSystemAlbum",
9.                                         "app": {
10.                                                 "js": false,
11.                                                 "kotlin": false,
12.                                                 "swift": false,
13.                                                 "arkts": true
14.                                         }
15.                                 }
16.                         }
17.                 },
19.                 ...其他属性
20.         }
21. }

复制代码

 3. 编写插件根目录下的 /utssdk/interface.uts 文件，内容如下

1. /**
2. * interface.uts
3. * uts插件接口定义文件，按规范定义接口文件可以在HBuilderX中更好的做到语法提示
4. */
6. /**
7. * myApi 异步函数的参数，在type里定义函数需要的参数以及api成功、失败的相关回调函数。
8. */
9. export type MyApiOptions = {
10.         fullUrl : string,
11.         renameUrl : string,
12.         fileType : string,
13.         success ?: (res : MyApiResult) => void,
14.         fail ?: (res : string) => void,
15.         progress ?: (res : any) => void,
16. }
18. /**
19. * 函数返回结果
20. * 可以是void, 基本数据类型，自定义type, 或者其他类型。
21. * [可选实现]
22. */
23. export type MyApiResult = {
24.         fieldA : number,
25.         fieldB : boolean,
26.         fieldC : string
27. }
29. /**
30. * 函数返回结果
31. * 可以是void, 基本数据类型，自定义type, 或者其他类型。
32. * [可选实现]
33. */
34. export type MyApiFail = {
35.         errMessage : string
36. }
39. /* 异步函数定义 */
40. export type MyApi = (options : MyApiOptions) => void
42. /* 同步函数定义 */
43. export type MyApiSync = (fullUrl : string) => MyApiResult

复制代码

4. 编写插件根目录下的 /utssdk/app-harmony/index.uts 文件（没有则新建），内容如下 

1. /* 引入 interface.uts 文件中定义的变量 */
2. import { MyApiOptions, MyApi } from '../interface.uts';
4. import request from '@ohos.request'; // 下载
5. import { fileUri } from '@kit.CoreFileKit'; // 获取getUriFromPath
6. import { photoAccessHelper } from '@kit.MediaLibraryKit'; // 保存到相册
7. import fs, { ReadOptions, WriteOptions } from '@ohos.file.fs';
8. import dataSharePredicates from '@ohos.data.dataSharePredicates';
10. // 1.是否同意下载-->同意:获取需要保存到媒体库的位于应用沙箱的媒体uri
11. // 2.文件下载-->progress:98%
12. // 3.已下载的沙箱文件写入已获取的媒体uri文件中-->progress:100%
14. export const hmDownloadToSystemAlbum : MyApi = async function (options : MyApiOptions) {
15.         let context : Context = getContext();
16.         let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
17.         let filesDir = context.filesDir;
18.         let cfg : request.DownloadConfig = {
19.                 url: options.fullUrl,
20.                 filePath: filesDir + '/' + options.renameUrl,
21.                 enableMetered: true
22.         }
23.         let downloadTask : request.DownloadTask;
25.         // 1.是否同意下载-->同意:获取需要保存到媒体库的位于应用沙箱的图片/视频uri
26.         try {
27.                 let srcFileUri : string = fileUri.getUriFromPath(cfg.filePath) || '';
28.                 let srcFileUris : Array<string> = [srcFileUri];
30.                 let fileType : photoAccessHelper.PhotoType = photoAccessHelper.PhotoType.IMAGE;
31.                 if (options.fileType === 'photo') fileType = photoAccessHelper.PhotoType.IMAGE;
32.                 if (options.fileType === 'video') fileType = photoAccessHelper.PhotoType.VIDEO;
33.                 let photoCreationConfigs : Array<photoAccessHelper.PhotoCreationConfig> = [
34.                         {
35.                                 title: options.renameUrl.split('.')[0] || '', // 可选-图片或者视频的标题，例如'test2'
36.                                 fileNameExtension: options.renameUrl.split('.').pop() || '', // 必填-文件扩展名，例如'jpg'
37.                                 photoType: fileType, // 必填-创建的文件类型，IMAGE或者VIDEO
38.                                 subtype: photoAccessHelper.PhotoSubtype.DEFAULT, // 可选-图片或者视频的文件子类型，DEFAULT[默认照片类型]或者MOVING_PHOTO[动态照片文件类型]
39.                         }
40.                 ];
42.                 let desFileUris : Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
43.                 let URI = desFileUris[0];
45.                 // 2.文件下载98%
46.                 if (desFileUris.length > 0) {
47.                         let progressNum : number = 0;
48.                         options?.progress?.(progressNum);
50.                         try {
51.                                 request.downloadFile(context.getApplicationContext(), cfg
52.                                         , (err, data) => {
53.                                                 if (err) {
54.                                                         console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
55.                                                         return;
56.                                                 }
57.                                                 downloadTask = data;
59.                                                 // 进度条
60.                                                 let progressCallback = (receivedSize : number, totalSize : number) => {
61.                                                         // console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
62.                                                         let numA : number = Math.round((totalSize / 98));
63.                                                         let numB : number = Math.round((receivedSize / numA));
64.                                                         options?.progress?.(numB);
65.                                                 };
66.                                                 downloadTask.on('progress', progressCallback);
68.                                                 // 下载完成
69.                                                 downloadTask.on("complete", async () => {
70.                                                         // console.log('下载完成', JSON.stringify(options));
71.                                                         try {
72.                                                                 // 判定文件是否存在
73.                                                                 if (fs.accessSync(URI)) {
74.                                                                         // 删除文件
75.                                                                         fs.unlinkSync(URI)
76.                                                                 }
78.                                                                 let srcFile = fs.openSync(cfg.filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
79.                                                                 let destFile = fs.openSync(URI, fs.OpenMode.READ_WRITE);
80.                                                                 // 读取源文件内容并写入至目的文件
81.                                                                 let bufSize = 4096;
82.                                                                 let readSize = 0;
83.                                                                 let buf = new ArrayBuffer(bufSize);
84.                                                                 let readOptions : ReadOptions = {
85.                                                                         offset: readSize,
86.                                                                         length: bufSize
87.                                                                 };
88.                                                                 let readLen = fs.readSync(srcFile.fd, buf, readOptions);
89.                                                                 while (readLen > 0) {
90.                                                                         readSize += readLen;
91.                                                                         let writeOptions : WriteOptions = {
92.                                                                                 length: readLen
93.                                                                         };
94.                                                                         fs.writeSync(destFile.fd, buf, writeOptions);
95.                                                                         readOptions.offset = readSize;
96.                                                                         readLen = fs.readSync(srcFile.fd, buf, readOptions);
97.                                                                 }
98.                                                                 // 关闭文件
99.                                                                 fs.closeSync(srcFile);
100.                                                                 fs.closeSync(destFile);
102.                                                                 return options?.progress?.(100);
103.                                                         } catch (e) {
104.                                                                 //TODO handle the exception
105.                                                                 options?.fail?.('下载失败，请重试');
106.                                                         }
107.                                                 })
108.                                         });
109.                         } catch (err) {
110.                                 options?.fail?.('下载失败，请重试');
111.                                 console.error('err.code : ' + err.code + ', err.message : ' + err.message);
112.                         }
113.                 } else {
114.                         // 取消授权
115.                         options?.fail?.('已取消');
116.                 }
117.         } catch (err) {
118.                 console.error('showAssetsCreationDialog failed, errCode is ' + err.code + ', errMsg is ' + err.message);
119.         }
120. }

复制代码

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

完备代码如上 /utssdk/app-harmony/index.uts 文件
1. 调用 showAssetsCreationDialog 接口拉起保存确认弹窗，获取已创建并授予保存权限的uri列表；

2. 若同意授权，调用 request.downloadFile 下载媒体文件到沙箱路径；

3. 在下载完成回调中，将下载的沙箱文件源内容写入至目的已授权uri中。


三、在页面中使用

1. import 引入

2.         // #ifdef APP-HARMONY
3.         // 仅鸿蒙会编译
4.         import {
5.                 hmDownloadToSystemAlbum
6.         } from "@/uni_modules/ha-downloadToSystemAlbum"
7.         // #endif

复制代码

2. 调用

1. methods: {
2.         downloadToSystemAlbum(payload) {
3.                 // 下载并保存
4.                 hmDownloadToSystemAlbum({
5.                         fullUrl: payload.downloadUrl, // 完整下载链接
6.                         renameUrl: payload.renameUrl, // 下载文件重命名
7.                         fileType: payload.fileType, // 下载媒体文件类型 'photo' | 'video'
8.                         progress: (res) => { // 下载进度条
9.                                 console.log('已下载' + res * 1 + '%');
10.                         },
11.                         fail: (err) => { // 下载失败
12.                                 if (err) {
13.                                         console.log('下载失败');
14.                                 }
15.                         },
16.                 });
17.         },
18. }  

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。