开源一夏｜OpenHarmony如何选择图片在Image组件上显示（eTS）

OpenHarmony如何选择图片在Image组件上显示（eTS）

相信大家都会有这样的一个使用场景，就是将图片选择

那么，我们来看一下如何使用，

导入模块

import mediaLibrary from '@ohos.multimedia.mediaLibrary';

mediaLibrary.getMediaLibrary8+

getMediaLibrary(context: Context): MediaLibrary

获取媒体库的实例，用于访问和修改用户等个人媒体数据信息（如音频、视频、图片、文档等）。

系统能力

：SystemCapability.Multimedia.MediaLibrary.Core

参数：

startMediaSelect(deprecated)

startMediaSelect(option: MediaSelectOption): Promise<Array<string>>

启动媒体选择界面，以异步方法获取选择的媒体URI列表，使用Promise形式返回结果。

说明

： 从API Version 9开始废弃。

系统能力

：SystemCapability.Multimedia.MediaLibrary.Core

参数：

返回值：

示例：

let option = {
 type : "image",
 count : 2
};
mediaLibrary.getMediaLibrary().startMediaSelect(option).then((value) => {
 console.log("Media resources selected.");
 // Obtain the media selection value.
}).catch((err) => {
 console.log("An error occurred when selecting media resources.");
});

最后附上完整代码

// @ts-nocheck
/*
 * Copyright (c) 2022 JianGuo 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.
 */
/**     
 * @ProjectName : nutsStudy
 * @FileName : file
 * @Author : 坚果
 * @Time : 2022/8/9 15:57
 * @Description : 文件描述 
 */
​
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
​
​
@Entry
@Component
struct FileSample {
 &nbsp;@State imgList: Array<string> = [];
​
 &nbsp;build() {
 &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp;Text(&quot;测试&quot;).fontSize(80).onClick(() => {
​
 &nbsp; &nbsp; &nbsp; &nbsp;let option = {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type: &quot;image&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;count: 2
 &nbsp; &nbsp; &nbsp; };
 &nbsp; &nbsp; &nbsp; &nbsp;mediaLibrary.getMediaLibrary().startMediaSelect(option, (err, value) => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (err) {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(&quot;An error occurred when selecting media resources.&quot; + err);
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return;
 &nbsp; &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(&quot;图片路径是：&quot; + value);
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.imgList = value;
 &nbsp; &nbsp; &nbsp; });
 &nbsp; &nbsp; })
​
 &nbsp; &nbsp; &nbsp;ForEach(this.imgList, (item: any, index?: number) => { // 循环数组创建每一个Item
 &nbsp; &nbsp; &nbsp; &nbsp;Image(item) // 可以生成一个或多个子组件
 &nbsp; &nbsp; &nbsp; &nbsp; .width(&quot;20%&quot;).height(&quot;20%&quot;)
 &nbsp; &nbsp; })
 &nbsp; }.width(&quot;100%&quot;).height(&quot;100%&quot;)
 }
}

参考文档

媒体库管理

Image