HarmonyOS 鸿蒙Next filePreview.openPreview 预览图片Uri,页面显示预览失败

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next filePreview.openPreview 预览图片Uri,页面显示预览失败

import { BusinessError } from '@kit.BasicServicesKit'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { filePreview } from '@kit.PreviewKit'
import { common } from '@kit.AbilityKit'

@Entry
@Component
struct Index {
  @State uri: string = ''
  onPreview(): void {
    let info: filePreview.PreviewInfo = {
      title: this.uri,
      uri: this.uri,
      mimeType: 'image/*'
    }
    if (canIUse('SystemCapability.FileManagement.FilePreview.Core')) {
      filePreview.openPreview(getContext(this) as common.UIAbilityContext, info).then((value) => {
        console.info( `openPreview result:${value}`)
      }).catch((err: BusinessError) => {
        console.info( `Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
      })
    } else {
      console.info( "SystemCapability.FileManagement.FilePreview.Core can not use")
    }
  }

  build() {
    Column() {
      Image(this.uri)
        .size({ width: '300px', height: '300px' })
        .renderMode(ImageRenderMode.Original)
        .objectFit(ImageFit.Fill)
        .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        .onClick(() => {
          this.onPreview()
        })
      Button('选择图片')
        .onClick(() => {
          const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions()
          photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE // 过滤选择媒体文件类型为IMAGE
          photoSelectOptions.maxSelectNumber = 1 // 选择媒体文件的最大数目
          photoSelectOptions.preselectedUris = [this.uri]
          const photoViewPicker = new photoAccessHelper.PhotoViewPicker()
          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
            this.uri = photoSelectResult.photoUris[0]
            console.info('photoViewPicker.select to file succeed and uris are:' + this.uri)
          }).catch((err: BusinessError) => {
            console.info(
              `Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`)
          })
        })
    }
  }
}


更多关于HarmonyOS 鸿蒙Next filePreview.openPreview 预览图片Uri,页面显示预览失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import { filePreview } from '@kit.PreviewKit';
import { BusinessError } from '@kit.BasicServicesKit';
import fileUri from '@ohos.file.fileuri';

let context = getContext(this) as common.UIAbilityContext;
let uiContext = getContext(this);



let fileInfo: filePreview.PreviewInfo = {
  // 文件预览信息,包含了文件标题名、uri以及文件类型(mimeType)
  title: '1.png',
  uri: '',
  // mimeType: 'application/pdf' // 文件(夹)的媒体资源类型,如text/plain
  mimeType: 'image/png' // 文件(夹)的媒体资源类型,如text/plain application/vnd.openxmlformats-officedocument.wordprocessingml.document
};

function  copyFile() {
  console.log("copyFile!")
  // let srcFileDescriptor = context.resourceManager.getRawFdSync('蓝牙ble 模式的demo使用说明%E5%85%B3%E8%81%94%E6%96%87%E4%BB%B6.pdf');
  let srcFileDescriptor = context.resourceManager.getRawFdSync('1.png');
  //这里填rawfile文件夹下的文件名(包括后缀)
  let stat = fs.statSync(srcFileDescriptor.fd)
  console.log(`stat isFile:${stat.isFile()}`);
  // 通过UIAbilityContext获取沙箱地址filesDir,以Stage模型为例
  let pathDir = context.filesDir;
  console.log("path:", pathDir)
  let dstPath = pathDir + "/1.png";
  let dest = fs.openSync(dstPath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
  let fileUriTmp = fileUri.getUriFromPath(dstPath);
  fileInfo.uri = fileUriTmp;
  let bufsize = 4096
  let buf = new ArrayBuffer(bufsize)
  let off = 0, len = 0, readedLen = 0
  while (len = fs.readSync(srcFileDescriptor.fd, buf, { offset: srcFileDescriptor.offset + off, length: bufsize })) {
    readedLen += len
    fs.writeSync(dest.fd, buf, { offset: off, length: len })
    off = off + len
    if ((srcFileDescriptor.length - readedLen) < bufsize) {
      bufsize = srcFileDescriptor.length - readedLen
    }
  }
  fs.close(dest.fd)
}


@Entry
@Component
struct Image {
  @State message: string = '预览图片';

  build() {
    Row() {
      Column() {
        Button('传到沙箱')
          .onClick(()=>{
            copyFile()
          })
        Button(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            filePreview.openPreview(uiContext, fileInfo).then(() => {
              console.info('openPreview success');
            }).catch((err: BusinessError) => {
              console.error('openPreview failed, err = ' + err.message);
            });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next filePreview.openPreview 预览图片Uri,页面显示预览失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中,如果遇到filePreview.openPreview方法预览图片Uri时页面显示预览失败的问题,首先需要确认以下几点:

  1. Uri有效性:确保传入的Uri是正确的,并且指向一个有效的图片文件。检查Uri的scheme(如file://, content://等)和路径是否正确无误。

  2. 文件访问权限:确认应用是否有权限访问该Uri指向的文件。对于content://类型的Uri,需要确保提供Uri的ContentProvider有正确的权限设置,并且应用已声明相应的<uses-permission>

  3. 文件存在性:检查文件是否真实存在于Uri指向的位置。可以通过文件管理器或代码方式验证文件是否存在。

  4. Uri格式:对于file://类型的Uri,确保路径格式正确,且没有包含非法字符或编码问题。

  5. 预览组件:确认使用的预览组件(如ImageViewer)是否支持该Uri格式,以及是否已正确初始化。

如果上述检查均无误,但问题依旧存在,可能是由于系统或应用的其他未知问题导致。此时,可以尝试重启设备或清除应用缓存和数据。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部