HarmonyOS 如何从相册里选择图片作为头像并保存路径以便下次打开时还能显示？

代码如下：

Image(this.avatarUri) 
  .size({ width: 84, height: 84 }) 
  .margin({ top: 36 }) 
  .borderRadius(Number.MAX_VALUE) 
  .onClick(async () => { 
    let photoSelectResult = await this.photoPicker.select(this.photoSelectOptions) 
    Log.debug(TAG, 
      `PhotoViewPicker.select successfully, photoSelectResult uri: ${JSON.stringify(photoSelectResult)}`) 
    this.avatarUri = photoSelectResult.photoUris[0] 
    this.preferences.put('avatar_uri', photoSelectResult.photoUris[0]).then(() => { 
      this.preferences.flush() 
    }) 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

我通过PhotoViewPicker从相册里选择图片作为头像后，将路径保存到preferences里，但是下次重新进入页面后从prefeneces里取出路径后，Image却不显示图片请求。

HarmonyOS

Heiang

2024-11-13 11:58:12

864浏览

已于2024-11-13 11:58:26修改

回答 1

按赞同

按时间

zbw_apple

需要将选择的图片uri保存到沙盒路径中保存使用。

choosePhoto() { 
  const photoSelectOptions = new picker.PhotoSelectOptions(); 
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE 
  photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目 
  let uris: Array<string> = []; 
  const photoViewPicker = new picker.PhotoViewPicker(); 
  photoViewPicker.select(photoSelectOptions).then(async (photoSelectResult: picker.PhotoSelectResult) => { 
    uris = photoSelectResult.photoUris; 
    console.info('photoViewPicker.select to file succeed and uris are:' + uris); 
 
    let context = getContext(this) as common.UIAbilityContext; 
    let resFile = fs.openSync(uris[0], fs.OpenMode.READ_ONLY) 
    const dateStr = (new Date().getTime()).toString() 
    // 临时文件目录 
    let newPath = context.cacheDir + `/${dateStr + resFile.name}`; 
    // 转化路径 
    fs.copyFileSync(resFile.fd, newPath); 
    // 新的路径 
    let realUri = 'file://' + newPath; 
    //保存路径使用 
    this.avatarUri = realUri; 
 
  }).catch((err: BusinessError) => { 
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 
  }) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.