1# 选择并查看文档与媒体文件 2 3### 介绍 4 5应用使用[@ohos.file.picker](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-picker.md)、[@ohos.file.photoAccessHelper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper-sys.md)、[@ohos.file.fs](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-fs.md) 等接口，实现了picker拉起文档编辑保存、拉起系统相册图片查看、拉起视频并播放的功能。 6 7### 效果预览 8 9| 首页 | 查看并编辑文档界面 | 查看图片界面 | 查看视频界面 | 10| ------------------------------------ | ----------------------------------- | -------------------------------------- | ------------------------------------ | 11|  |  |  |  | 12 13 使用说明： 14 151. 在首页，应用展示出最近打开过的文档信息，点击信息可以进入对应文档的查看界面。通过点击右上方的三个按钮，可以分别实现新建文档、选择图片或视频并打开预览、选择文档并打开的功能。 162. 在查看文档界面，点击右上方左一按钮，可以实现当前文档另存为的功能；点击右上方中间的按钮，开启文档的编辑功能，textArea变成可编辑状态，用户输入数据后点击右上方第三个按钮，可以将当前文档内容进行保存操作。 173. 在查看图片界面，picker拉起系统相册的图片，用户至多可选择三张图片查看，点击图片可以切换所显示的图片名及大小信息。 184. 在查看视频界面，picker拉起系统相册的视频，用户至多可选择三个视频查看，点击视频播放并且可以显示的视频名及大小信息。 19 20### 工程目录 21 22``` 23entry/src/main/ets/ 24|---common 25| |---Common.ts 26| |---Utils.ts 27| |---Logger.ts //日志工具 28|---entryability 29| |---EntryAbility.ts //ability类 30|---media 31| |---MediaFileUri.ts //媒体文件相关函数 32|---pages 33| |---EditFile.ets //查看并编辑文档界面 34| |---Index.ets //首页 35| |---ViewMedia.ets //查看图片和视频界面 36``` 37 38### 具体实现 39 40- 拉起picker选择文件、拉起picker保存文件、拉起picker选择图片或视频的功能封装在Index.ets，源码参考：[Index.ets](entry/src/main/ets/pages/Index.ets) 41 42 * 使用mediaLiabrary.getMediaLibrary来获取媒体库的实例，用于访问和修改用户等个人媒体数据信息（如视频、图片、文档等）；使用media.getFileAssets来获取文件资源；使用来fetchFileResult.getFirstObject获取文件检索结果中的头一个文件资产，接口参考：[@ohos.file.photoAccessHelper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper-sys.md) 43 * 使用new picker.DocumentViewPicker来创建文件picker实例，使用documentPicker.select来拉起picker选择文件，使用documentPicker.save来拉起picker保存文件，接口参考：[@ohos.file.picker](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-picker.md) 44 * 使用new picker.PhotoViewPicker来创建图库picker实例，使用photoPicker.select来拉起picker选择图片或视频，接口参考：[@ohos.file.picker](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-picker.md) 45- 编辑文件并保存的功能封装在EditFile.ets，源码参考：[EditFile.ets](entry/src/main/ets/pages/EditFile.ets) 46 47 * 使用fs.mkdirSync、fs.openSync、fs.writeSync、fs.readSync、fs.closeSync分别用来来创建文件夹、打开文件、写文件、读文件、关闭文件，接口参考：[@ohos.file.fs](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-fs.md) 48- 拉起图片或视频并查看的功能封装在ViewMedia.ets，源码参考：[ViewMedia.ets](entry/src/main/ets/pages/ViewMedia.ets) 49 50 * 使用new picker.PhotoViewPicker来创建图库picker实例，使用photoPicker.save来拉起picker保存图片或视频，接口参考：[@ohos.file.picker](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-file-picker.md) 51 * 使用mediaLiabrary.getMediaLibrary来获取媒体库的实例，用于访问和修改用户等个人媒体数据信息（如视频、图片、文档等），然后使用media.getFileAssets来获取文件资源再使用fileAsset.displayName来获取图片或视频的名称，接口参考：[@ohos.file.photoAccessHelper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper-sys.md) 52 53### 相关权限 54 55| 权限名 | 权限说明 | 级别 | 56| -------------------------------- | ---------------------------------------- | ------------ | 57| ohos.permission.MEDIA_LOCATION | 允许应用访问用户媒体文件中的地理位置信息 | normal | 58| ohos.permission.READ_MEDIA | 允许应用读取用户外部存储中的媒体文件信息 | normal | 59| ohos.permission.WRITE_MEDIA | 允许应用读写用户外部存储中的媒体文件信息 | normal | 60| ohos.permission.WRITE_IMAGEVIDEO | 允许修改用户公共目录的图片或视频文件 | system_basic | 61| ohos.permission.READ_IMAGEVIDEO | 允许读取用户公共目录的图片或视频文件 | system_basic | 62 63### 依赖 64 65不涉及 66 67### 约束与限制 68 691.本示例仅支持标准系统上运行，支持设备：RK3568。 70 712.本示例为Stage模型，支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release) 72 733.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。 74 754.本示例涉及部分接口需要配置系统应用签名，可以参考[特殊权限配置方法](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/subsys-app-privilege-config-guide.md) ，把配置文件中的“apl”字段信息改为“system_basic”。 76 77### 下载 78 79如需单独下载本工程，执行如下命令： 80 81``` 82git init 83git config core.sparsecheckout true 84echo code/SystemFeature/FileManagement/FileShare/Picker > .git/info/sparse-checkout 85git remote add origin https://gitee.com/openharmony/applications_app_samples.git 86git pull origin master 87``` 88
