鸿蒙应用框架开发【选择并查看文档与媒体文件】本地数据与文件

选择并查看文档与媒体文件

介绍

应用使用@ohos.file.picker、@ohos.file.fs等接口，实现了picker拉起文档编辑保存、拉起系统相册图片查看、拉起视频并播放的功能。

效果预览

使用说明：

在首页，应用显示查看最近打开文件功能的跳转按钮，点击后进入文件管理页面，可以通过最近页面，查看最近打开的文件。通过点击右上方的三个按钮，可以分别实现新建文档、选择图片或视频并打开预览、选择文档并打开的功能。
在查看文档界面，点击右上方左一按钮，可以实现当前文档另存为的功能；点击右上方中间的按钮，开启文档的编辑功能，textArea变成可编辑状态，用户输入数据后点击右上方第三个按钮，可以将当前文档内容进行保存操作（系统文档没有保存权限）。
在查看图片界面，picker拉起系统相册的图片，用户至多可选择三张图片查看，点击图片可以切换所显示的图片名及大小信息。
在查看视频界面，picker拉起系统相册的视频，用户至多可选择三个视频查看，点击视频播放并且可以显示的视频名及大小信息。

具体实现

拉起picker选择文件、拉起picker保存文件、拉起picker选择图片或视频的功能封装在Index.ets，源码参考：[Index.ets]

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the 'License');* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an 'AS IS' BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { router } from '@kit.ArkUI';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import Logger from '../common/Logger';
import MediaFileUri from '../media/MediaFileUri';
import { Constants } from '../common/Constants';const MAX_SELECT_NUM = 3; // 选择媒体文件的最大数目
const TAG = 'pickerIndex';@Entry
@Component
struct Index {@State uri: string = 'Hello World';@State filename: string = '';@State sizeFile: number = 0;@State log: string = '';@State imageFlagCur: number = 0;@StorageLink('fileSizeList') fileSizeList: Array<number> = [];@StorageLink('fileNameList') fileNameList: Array<string> = [];@StorageLink('fileUriList') fileUriList: Array<string> = [];@StorageLink('imageNames') imageNames: Array<string> = [];mediaFileUri: MediaFileUri = new MediaFileUri();scroller: Scroller = new Scroller();authorizeBundleName: string = 'com.open.file.uri.demo';// 拉起picker选择文件async callFilePickerSelectFile(): Promise<void> {try {let DocumentSelectOptions = new picker.DocumentSelectOptions();let documentPicker = new picker.DocumentViewPicker();documentPicker.select(DocumentSelectOptions).then((DocumentSelectResult) => {Logger.info(TAG,'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + JSON.stringify(DocumentSelectResult));let editFlag = false;if (DocumentSelectResult !== null && DocumentSelectResult !== undefined) {DocumentSelectResult.forEach((value) => {this.uri = value;editFlag = true;Logger.info(TAG, `select file uri: ${this.uri}`);})}if (editFlag) {this.getFilenameByUri(this.uri);}}).catch((err: BusinessError) => {Logger.error(TAG, 'DocumentViewPicker.select failed with err: ' + JSON.stringify(err));});} catch (err) {Logger.error(TAG, 'DocumentViewPicker failed with err: ' + JSON.stringify(err));}}// 拉起picker保存文件async callFilePickerSaveFile(): Promise<void> {try {let DocumentSaveOptions = new picker.DocumentSaveOptions();DocumentSaveOptions.newFileNames = ['MyDocument_01.txt'];let documentPicker = new picker.DocumentViewPicker();documentPicker.save(DocumentSaveOptions).then((DocumentSaveResult) => {Logger.info(TAG,'DocumentViewPicker.save successfully, DocumentSaveResult uri: ' + JSON.stringify(DocumentSaveResult));if (DocumentSaveResult !== null && DocumentSaveResult !== undefined) {this.uri = DocumentSaveResult[0];Logger.info(TAG, `save file uri: ${this.uri}`);}this.getFilenameByUri(this.uri);}).catch((err: BusinessError) => {Logger.error(TAG, 'DocumentViewPicker.save failed with err: ' + JSON.stringify(err));});} catch (err) {Logger.error(TAG, 'DocumentViewPicker failed with err: ' + err);}}async getFilenameByUriForMedia(myUris: string[]) {router.pushUrl({url: 'pages/ViewMedia',params: {uris: myUris}}, router.RouterMode.Standard);}async getFilenameByUri(myUri: string): Promise<void> {// 获取文件名称this.filename = (myUri.split('/').pop()) as string;router.pushUrl({url: 'pages/EditFile',params: {fileName: this.filename,myUri: myUri}}, router.RouterMode.Standard);}// 拉起picker选择图片/视频async callFilePickerSelectImage(): Promise<void> {let array: string[];try {// 设置photoPicker的参数let PhotoSelectOptions = new picker.PhotoSelectOptions();// 过滤选择媒体文件类型PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;// 选择媒体文件的最大数目PhotoSelectOptions.maxSelectNumber = MAX_SELECT_NUM;let mediaFlag = false;// 使用图库选择器对象前，需要先创建PhotoViewPicker实例let photoPicker = new picker.PhotoViewPicker();photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {// 日志中记录成功信息Logger.info(TAG,'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));// 接口采用callback异步返回形式，返回PhotoSelectResult对象，故进行下一步操作前要先判断是否已经成功返回PhotoSelectResult对象了if (PhotoSelectResult !== null && PhotoSelectResult !== undefined) {// PhotoSelectResult为返回的结果集。// 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。// 声明变量array，其取值为PhotoSelectResult中的数组。array = PhotoSelectResult['photoUris'];array.forEach((value) => {this.uri = value;mediaFlag = true;Logger.info(TAG, `select image/video uri: ${this.uri}`);})}if (mediaFlag) {this.getFilenameByUriForMedia(array);}}).catch((err: BusinessError) => {Logger.error(TAG, 'PhotoViewPicker.select failed with err: ' + JSON.stringify(err));});} catch (err) {Logger.error(TAG, 'PhotoViewPicker failed with err: ' + err);}}aboutToDisappear(): void {this.fileNameList = [];this.fileSizeList = [];this.fileUriList = [];}onPageShow(): void {this.mediaFileUri.getAllFiles();}build() {Scroll(this.scroller) {Row() {Column() {Row() {Column() {Text($r('app.string.last_open')).fontFamily('HarmonyHeiTi-Bold').fontSize($r('app.float.text_font_size_30')).fontWeight(Constants.TEXT_FONT_WIGHT).textAlign(TextAlign.Start).fontColor($r('app.color.text_font_color')).lineHeight($r('app.float.first_line_height')).width(Constants.SEVENTY_PERCENT).height($r('app.float.first_line_height'))}.width(Constants.FIFTY_PERCENT).margin({ left: Constants.PADDING_LEFT_RIGHT }).alignItems(HorizontalAlign.Start)Row() {Image($r('app.media.ic_saveas')).width($r('app.float.image_size')).height($r('app.float.image_size')).margin({ right: Constants.IMAGE_MARGIN_RIGHT }).id('newFile').onClick(() => {this.callFilePickerSaveFile();})Image($r('app.media.ic_picture')).width($r('app.float.image_size')).height($r('app.float.image_size')).id('picture').margin({ right: Constants.IMAGE_MARGIN_RIGHT }).onClick(() => {this.callFilePickerSelectImage();})Image($r('app.media.ic_folder')).width($r('app.float.image_size')).height($r('app.float.image_size')).id('folder').opacity(1).margin({ right: Constants.MARGIN_RIGHT }).onClick(() => {this.callFilePickerSelectFile();})}.justifyContent(FlexAlign.End).padding({ right: Constants.PADDING_RIGHT }).width(Constants.FIFTY_PERCENT)}// 第一行结束.width(Constants.FULL_PERCENT).height($r('app.float.first_line_height')).margin({top: $r('app.float.first_line_margin_top'),left: $r('app.float.first_line_margin_left'),right: $r('app.float.first_line_margin_right'),bottom: $r('app.float.first_line_margin_bottom')})Row() {Text($r('app.string.view_last_open')).fontSize($r('app.float.text_area_font_size')).textAlign(TextAlign.Start).lineHeight($r('app.float.line_height')).margin({ left: $r('app.float.image_margin_left') })Blank()Image($r('app.media.right_arrow')).height($r('app.float.text_height_19')).width($r('app.float.image_width')).margin({left: $r('app.float.image_margin_left'),right: $r('app.float.image_margin_left'),top: $r('app.float.image_margin_top'),bottom: $r('app.float.image_margin_top')})}.backgroundColor($r('app.color.start_window_background')).width(Constants.FULL_PERCENT).height($r('app.float.row_height')).padding({top: $r('app.float.row_padding'),left: $r('app.float.margin_padding_12'),right: $r('app.float.margin_padding_12')}).onClick(() => {this.callFilePickerSelectFile();})Column() {List({ space: Constants.LIST_SPACE, initialIndex: 0 }) {ForEach(this.fileNameList, (item: string, index?: number) => {ListItem() {Row() {Image($r('app.media.ic_docs')).width(Constants.IMAGE_WIDTH).height($r('app.float.line_height')).margin({left: $r('app.float.margin_left'),right: $r('app.float.margin_right')})Text(item).fontSize($r('app.float.text_area_font_size')).fontFamily('HarmonyHeiTi-Medium').fontColor($r('app.color.text_font_color')).lineHeight($r('app.float.line_height')).textAlign(TextAlign.Start).margin({ right: $r('app.float.padding_left_right') }).width(Constants.SIXTY_FOUR_PERCENT)if (index !== undefined) {Text('Size: ' + JSON.stringify(this.fileSizeList[index]) + 'B').fontSize($r('app.float.text_font_size_14')).fontFamily('HarmonyHeiTi-Medium').lineHeight($r('app.float.text_height_19')).fontColor($r('app.color.text_font_color')).textAlign(TextAlign.End).opacity(Constants.TEXT_OPACITY).width(Constants.TEXT_WIDTH).margin({ right: $r('app.float.margin_padding_12') })}}.id('fileItem' + (index !== undefined ? index : "")).borderRadius(Constants.BORDER_RADIUS).width(Constants.FULL_PERCENT).height($r('app.float.row_height_64')).padding({ right: $r('app.float.margin_padding_12') }).backgroundColor($r('app.color.start_window_background'))}.onClick(() => {Logger.info(TAG, 'fileAsset.displayName fileName item: ' + item);if (index !== undefined) {router.pushUrl({url: 'pages/EditFile',params: {fileName: item,myUri: this.fileUriList[index]}}, router.RouterMode.Standard);}})}, (item: string) => item)}.listDirection(Axis.Vertical) // 排列方向.id('indexList').edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果.scrollBar(BarState.Auto).alignListItem(ListItemAlign.Center).margin({top: Constants.LIST_MARGIN_TOP,left: $r('app.float.margin_padding_12'),right: $r('app.float.margin_padding_12')})}.height(Constants.FULL_PERCENT).width(Constants.FULL_PERCENT)}.alignItems(HorizontalAlign.Center).width(Constants.FULL_PERCENT).height(Constants.FULL_PERCENT).backgroundColor($r('app.color.common_background'))}.height(Constants.FULL_PERCENT)}}
}

使用new picker.DocumentViewPicker来创建文件picker实例，使用documentPicker.select来拉起picker选择文件，使用documentPicker.save来拉起picker保存文件，接口参考：@ohos.file.picker
使用new picker.PhotoViewPicker来创建图库picker实例，使用photoPicker.select来拉起picker选择图片或视频，接口参考：@ohos.file.picker
编辑文件并保存的功能封装在EditFile.ets，源码参考：[EditFile.ets]

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the 'License');* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an 'AS IS' BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { promptAction, router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { fileIo, picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import MediaFileUri from '../media/MediaFileUri';
import Logger from '../common/Logger';
import { terminateSelf } from '../utils/utils';
import { Constants } from '../common/Constants';const TAG = 'EditFile: ';
let storage = LocalStorage.getShared();
const OPACITY_VALUE = 0.6; // 透明度interface myParams extends Object {myUri: string,fileName: string
};@Entry(storage)
@Component
struct EditFile {@LocalStorageLink('loadFlag') loadFlag: Boolean = false;@LocalStorageLink('loadFileSize') loadFileSize: number = 0;@LocalStorageLink('loadFileName') loadFileName: string = '';@LocalStorageLink('loadFileContent') loadFileContent: string = '';@LocalStorageLink('loadUri') loadUri: string = '';@LocalStorageLink('fd') loadFd: number = 0;@StorageLink('editable') editable: Boolean = false;@StorageLink('myFileSize') myFileSize: number = 0;@StorageLink('myFileContent') myFileContent: string = '';@State myContext: Context = getContext(this) as common.UIAbilityContext;@State myUri: string = '';@State opacityValue: number = OPACITY_VALUE;@State uriSave: string = '';@State myFileName: string = '';public fileContentFlag: boolean = false;newFileContent: string = '';scroller: Scroller = new Scroller();controller: TextAreaController = new TextAreaController();mediaFileUri: MediaFileUri = new MediaFileUri();getFileInfo(): void {if (this.loadFlag) {this.myFileName = this.loadFileName;this.myFileContent = this.loadFileContent;this.myFileSize = this.loadFileSize;this.myUri = this.loadUri;Logger.info(TAG, 'The count of getFileInfo is myFileContent ' + this.myFileContent);} else {this.myUri = (router.getParams() as myParams).myUri;this.myFileName = (router.getParams() as myParams).fileName;this.myFileContent = this.mediaFileUri.readFileContent(this.myUri);this.myFileSize = this.mediaFileUri.myGetFileSize(this.myUri, fileIo.OpenMode.READ_ONLY);Logger.info(TAG, 'The count of getFileInfo is myFileName is: ' + this.myFileName);Logger.info(TAG, 'The count of getFileInfo is myFileContent ' + this.myFileContent);Logger.info(TAG, 'The count of getFileInfo is myFileSize ' + this.myFileSize);}AppStorage.setOrCreate('myFileContent', this.myFileContent);AppStorage.setOrCreate('myFileSize', this.myFileSize);}async writeContentForSaveAsFile(myUri: string, wrFlag: Boolean = false): Promise<void> {if (wrFlag) {Logger.info(TAG, 'fileAsset.displayName wrFlag is true');Logger.info(TAG, 'fileAsset.displayName wrFlag myFileContent :' + this.myFileContent);this.mediaFileUri.writeFileContent(myUri, this.myFileContent);}}// 拉起picker保存文件async callFilePickerSaveFile(): Promise<void> {try {let DocumentSaveOptions = new picker.DocumentSaveOptions();DocumentSaveOptions.newFileNames = ['MyDocument_01.txt'];let documentPicker = new picker.DocumentViewPicker();documentPicker.save(DocumentSaveOptions).then((DocumentSaveResult) => {Logger.info(TAG,'DocumentViewPicker.save successfully, DocumentSaveResult uri: ' + JSON.stringify(DocumentSaveResult));if (DocumentSaveResult !== null && DocumentSaveResult !== undefined) {this.uriSave = DocumentSaveResult[0];Logger.info(TAG, `save callFilePickerSaveFile file this.uriSave: ${this.uriSave}`);}Logger.info(TAG, 'fileAsset.displayName wrFlag myFileContent :' + this.myFileContent);// 用 medialibrary 重新获取uri，进行写入操作this.writeContentForSaveAsFile(this.uriSave, true);}).catch((err: BusinessError) => {Logger.error(TAG, 'DocumentViewPicker.save failed with err: ' + JSON.stringify(err));});} catch (err) {Logger.error(TAG, 'DocumentViewPicker failed with err: ' + err);}}onPageShow(): void {this.getFileInfo();this.editable = false;}build() {Column() {// 顶部的行容器Row() {// 后退箭头Row() {Image($r('app.media.ic_back')).focusable(true).focusOnTouch(true).id('backIndex').width($r('app.float.image_size')).height($r('app.float.image_size')).align(Alignment.Start).onClick(() => {if (this.loadFlag) {Logger.info(TAG, 'end page');let context = getContext(this);terminateSelf(context);} else {router.back();}})}.margin({ left: Constants.MARGIN_LEFT })// 文件名及信息Column() {Row() {Text(this.myFileName).focusable(true).focusOnTouch(true).fontSize($r('app.float.text_font_size')).fontFamily('HarmonyHeiTi-Bold').fontColor($r('app.color.text_font_color')).textAlign(TextAlign.Start).fontWeight(Constants.TEXT_FONT_WIGHT).lineHeight(Constants.TEXT_LINE_HEIGHT).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}.width(Constants.FULL_PERCENT).align(Alignment.Start).margin({left: Constants.MARGIN_LEFT,top: Constants.MARGIN_TOP,bottom: Constants.MARGIN_ZERO_POINT_THREE_PERCENT})Row() {Text('size: ' + JSON.stringify(this.myFileSize) + 'B').focusable(true).focusOnTouch(true).opacity(Constants.TEXT_OPACITY).fontFamily('HarmonyHeiTi').fontSize($r('app.float.text_font_size_14')).fontColor($r('app.color.text_font_color')).textAlign(TextAlign.Start).lineHeight(Constants.TEXT_LINE_HEIGHT_19).fontWeight(Constants.TEXT_FONT_WIGHT_400)}.width(Constants.FULL_PERCENT).margin({left: Constants.MARGIN_LEFT,top: Constants.MARGIN_ZERO_POINT_THREE_PERCENT,bottom: Constants.MARGIN_ZERO_POINT_FIVE_PERCENT}).align(Alignment.Start)}.width(Constants.FORTY_FIVE_PERCENT).margin({ left: Constants.MARGIN_LEFT })// 右边三个图标Row() {Image($r('app.media.ic_saveas')).focusable(true).focusOnTouch(true).width($r('app.float.image_size')).height($r('app.float.image_size')).id('saveAs').margin({ right: Constants.IMAGE_MARGIN_RIGHT }).onClick(() => {this.callFilePickerSaveFile();}).visibility(this.loadFlag ? Visibility.Hidden : Visibility.Visible)Image($r('app.media.ic_writting')).focusable(true).focusOnTouch(true).width($r('app.float.image_size')).height($r('app.float.image_size')).id('editable').margin({ right: Constants.IMAGE_MARGIN_RIGHT }).onClick(() => {this.editable = true;AppStorage.setOrCreate('editable', this.editable);Logger.info(TAG, 'EditFile caretPosition length = ' + this.myFileContent.length);this.controller.caretPosition(this.myFileContent.length);promptAction.showToast({ message: $r('app.string.editable') });})Image($r('app.media.ic_save')).focusable(true).focusOnTouch(true).width($r('app.float.image_size')).height($r('app.float.image_size')).id('save').margin({ right: Constants.MARGIN_LEFT }).onClick(() => {if (this.fileContentFlag) {let flage: boolean = true;this.myFileContent = this.newFileContent;AppStorage.setOrCreate('myFileContent', this.myFileContent);Logger.info(TAG, 'save onClick myFileContent is: ' + this.myFileContent);Logger.info(TAG, 'save onClick this.loadUri: ' + this.loadUri);if (this.loadFlag) {let file = fileIo.openSync(this.loadUri,fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.TRUNC);Logger.info(TAG, 'save onClick file.fd is: ' + file.fd);fileIo.write(file.fd, this.myFileContent).then((writeLen) => {Logger.info(TAG, 'write data to file succeed and size is:' + writeLen);this.myFileSize = fileIo.statSync(file.fd).size;AppStorage.setOrCreate('myFileSize', this.myFileSize);Logger.info(TAG, 'save onClick this.myFileSize ' + this.myFileSize);}).catch((err: BusinessError) => {Logger.info(TAG, 'write data to file failed with error:' + JSON.stringify(err));});fileIo.closeSync(file);} else {try {let file = fileIo.openSync(this.myUri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.TRUNC);let writeLen = fileIo.writeSync(file.fd, this.myFileContent);this.myFileSize = fileIo.statSync(file.fd).size;AppStorage.setOrCreate('myFileSize', this.myFileSize);Logger.info(TAG, 'write data to file succeed and size is:' + writeLen);fileIo.closeSync(file);} catch (err) {flage = false;Logger.info(`save data to file failed with error:${JSON.stringify(err)}: ${JSON.stringify(err?.message)}`);promptAction.showToast({message: Constants.SHOW_TOAST_MESSAGE,duration: 6500})}}if (flage) {this.editable = false;AppStorage.setOrCreate('editable', this.editable);promptAction.showToast({ message: $r('app.string.saved') });}}})}.height(Constants.FIFTY_PERCENT).width(Constants.THIRTY_SEVEN_POINT_TWO).padding({ right: Constants.MARGIN_ZERO_POINT_FIVE_PERCENT }).justifyContent(FlexAlign.End)}.height(Constants.SEVEN_POINT_FOUR).width(Constants.FULL_PERCENT)Scroll(this.scroller) {// TextArea的行容器Row() {TextArea({text: this.newFileContent ? this.newFileContent : this.myFileContent,placeholder: Constants.TEXT_AREA_PLACEHOLDER,controller: this.controller}).id('textArea').fontSize($r('app.float.text_area_font_size')).fontColor($r('app.color.text_font_color')).opacity(this.opacityValue).fontWeight(Constants.TEXT_FONT_WIGHT_400).align(Alignment.TopStart).textAlign(TextAlign.Start).backgroundColor($r('app.color.common_background')).fontFamily('HarmonyHeiTi').padding({top: $r('app.float.padding_top_bottom'),right: $r('app.float.padding_left_right'),left: $r('app.float.padding_left_right'),bottom: $r('app.float.padding_top_bottom')}).focusable(this.editable ? true : false).focusOnTouch(true).defaultFocus(false).onFocus(() => {this.opacityValue = 1;}).onBlur(() => {this.opacityValue = OPACITY_VALUE;}).onChange((value: string) => {this.newFileContent = value;this.fileContentFlag = true;})}.padding({top: Constants.PADDING_TOP,left: Constants.PADDING_LEFT_RIGHT,right: Constants.PADDING_LEFT_RIGHT})}}.backgroundColor($r('app.color.common_background')).height(Constants.FULL_PERCENT)}
}

使用fs.openSync、fs.writeSync、fs.readSync、fs.closeSync分别用来打开文件、写文件、读文件、关闭文件，接口参考：@ohos.file.fs
拉起图片或视频并查看的功能封装在ViewMedia.ets，源码参考：[ViewMedia.ets]

/** Copyright (c) 2024 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the 'License');* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an 'AS IS' BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { fileIo, picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import MediaFileUri from '../media/MediaFileUri';
import Logger from '../common/Logger';
import { Constants } from '../common/Constants';const TAG = 'ViewMedia';interface myParams extends Object {uris: string[]
};@Entry
@Component
struct ViewMedia {@State myContext: Context = getContext(this) as common.UIAbilityContext;@State myFileSizes: number[] = [];@State myFileNames: string[] = [];@State myFileTypes: number[] = [];@StorageLink('myFileName') myFileName: string = '';@StorageLink('myFileSize') myFileSize: number = 0;@State myUris: string[] = (router.getParams() as myParams).uris;@State uri: string = 'Hello World';@StorageLink('showPauses') showPauses: Array<number> = [];mediaFileUri: MediaFileUri = new MediaFileUri();scroller: Scroller = new Scroller();currentUri: string = '';controllers: Array<VideoController> = [];// 拉起picker保存图片/视频async callFilePickerSaveImageVideo(): Promise<void> {try {let PhotoSaveOptions = new picker.PhotoSaveOptions();PhotoSaveOptions.newFileNames = ['PhotoViewPicker01.jpg', 'PhotoViewPicker01.mp4'];let photoPicker = new picker.PhotoViewPicker();photoPicker.save(PhotoSaveOptions).then((PhotoSaveResult) => {Logger.info(TAG, 'PhotoViewPicker.save successfully, PhotoSaveResult uri: ' + JSON.stringify(PhotoSaveResult));if (PhotoSaveResult !== null && PhotoSaveResult !== undefined) {PhotoSaveResult.forEach((value: string) => {this.uri = valueLogger.info(TAG, `save image/video uri: ${this.uri}`);})}}).catch((err: BusinessError) => {Logger.error(TAG, 'PhotoViewPicker.save failed with err: ' + JSON.stringify(err));});} catch (err) {Logger.error(TAG, 'PhotoViewPicker failed with err: ' + err);}}onPageShow() {this.getImagesInfo();this.myFileName = this.myFileNames[0];this.myFileSize = this.myFileSizes[0];Logger.info(TAG, 'onPageShow getFilenameByUriForMedia this.myFileName ' + this.myFileName);Logger.info(TAG, 'onPageShow getFilenameByUriForMedia begin ' + this.myFileSize);AppStorage.setOrCreate('myFileName', this.myFileName);AppStorage.setOrCreate('myFileSize', this.myFileSize);}async getMediaNameByUri(myUri: string, index: number) {Logger.info(TAG, 'getMediaNameByUri getFilenameByUriForMedia begin');this.myFileName = (myUri.split('/').pop()) as string;this.myFileNames[index] = this.myFileName;}getImagesInfo() {for (let index = 0; index < this.myUris.length; index++) {Logger.info(TAG, 'getFilenameByUriForMedia  getImagesInfo  index: ' + index);this.controllers[index] = new VideoController();this.getMediaNameByUri(this.myUris[index], index);this.myFileSizes[index] = this.mediaFileUri.myGetFileSize(this.myUris[index], fileIo.OpenMode.READ_ONLY);Logger.info(TAG, 'getFilenameByUriForMedia  getVideosInfo  this.myFileNames[index]: '+ this.myFileNames[index] + ' index ' + index);Logger.info(TAG, 'getFilenameByUriForMedia getVideosInfo this.myFileSizes[index]' + this.myFileSizes[index]);Logger.info(TAG, 'getFilenameByUriForMedia getVideosInfo this.myFileTypes[index] cc' + this.myFileTypes[index]);}}build() {Column() {// 顶部的行容器Row() {// 后退箭头Row() {Image($r('app.media.ic_back')).focusable(true).focusOnTouch(true).width($r('app.float.image_size')).height($r('app.float.image_size')).align(Alignment.Start).id('back2Index').onClick(() => {router.back();})}.width(Constants.BACK_WIDTH).padding({ left: Constants.BACK_PADDING_LEFT })// 文件名及信息Column() {Row() {Text(this.myFileName).focusable(true).focusOnTouch(true).fontSize($r('app.float.text_font_size')).fontFamily('HarmonyHeiTi-Bold').fontColor($r('app.color.text_font_color')).textAlign(TextAlign.Start).fontWeight(Constants.TEXT_FONT_WIGHT).lineHeight($r('app.float.text_height')).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}.width(Constants.FULL_PERCENT).align(Alignment.Start).margin({top: Constants.MARGIN_TOP,bottom: Constants.MARGIN_ZERO_POINT_THREE_PERCENT})Row() {Text('size: ' + JSON.stringify(this.myFileSize) + 'B').focusable(true).focusOnTouch(true).opacity(Constants.TEXT_OPACITY).fontFamily('HarmonyHeiTi').fontSize($r('app.float.text_font_size_14')).fontColor($r('app.color.text_font_color')).textAlign(TextAlign.Start).lineHeight($r('app.float.text_height_19')).fontWeight(Constants.TEXT_FONT_WIGHT_400)}.width(Constants.FULL_PERCENT).margin({top: Constants.MARGIN_ZERO_POINT_THREE_PERCENT,bottom: Constants.MARGIN_ZERO_POINT_FIVE_PERCENT}).align(Alignment.Start)}.width(Constants.FORTY_FIVE_PERCENT).margin({ left: Constants.MARGIN_LEFT })// 右边一个图标，另存为Row() {Image($r('app.media.ic_saveas')).focusable(true).focusOnTouch(true).width($r('app.float.image_size')).height($r('app.float.image_size')).visibility(Visibility.Hidden)}.height(Constants.FULL_PERCENT).width(Constants.THIRTY_SEVEN_POINT_TWO).padding({ right: Constants.BACK_PADDING_LEFT }).justifyContent(FlexAlign.End)}.height(Constants.SEVEN_POINT_FOUR).width(Constants.FULL_PERCENT)Scroll(this.scroller) {// 显示媒体文件的容器Column() {List({ space: Constants.LIST_SPACE_20, initialIndex: 0 }) {ForEach(this.myUris, (uri: string, index?: number) => {ListItem() {Column() {Image(uri).borderRadius(Constants.BORDER_RADIUS).onClick(() => {if (index !== undefined) {this.myFileSize = this.myFileSizes[index];this.myFileName = this.myFileNames[index];}AppStorage.setOrCreate('myFileName', this.myFileName);AppStorage.setOrCreate('myFileSize', this.myFileSize);Logger.info(TAG, 'Image onClick myFileName is ' + this.myFileName);Logger.info(TAG, 'Image onClick myFileName is ' + this.myFileSize);})if (index !== undefined) {Stack({ alignContent: Alignment.Center }) {Video({src: uri,controller: this.controllers[index]}).autoPlay(false).controls(true).borderRadius(Constants.BORDER_RADIUS)Image($r('app.media.ic_PAUSE')).width($r('app.float.image_size')).height($r('app.float.image_size')).onClick(() => {this.controllers[index].start();this.showPauses[index] = 0;})}.onClick(() => {this.myFileSize = this.myFileSizes[index];this.myFileName = this.myFileNames[index];AppStorage.setOrCreate('myFileName', this.myFileName);AppStorage.setOrCreate('myFileSize', this.myFileSize);})}}.height(Constants.FULL_PERCENT)}.height(Constants.TWENTY_FIVE_PERCENT)}, (item: string) => item)}.id('picScroller').scrollBar(BarState.Auto)}}.padding({top: Constants.ONE_POINT_FIVE_PERCENT,left: Constants.PADDING_LEFT_RIGHT,right: Constants.PADDING_LEFT_RIGHT})}.backgroundColor($r('app.color.common_background')).height(Constants.FULL_PERCENT)}
}

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：