HarmonyOS 调用filePreview，文件预览失败？

Question

参考文档预览文件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/preview-arkts-V5\#section1081123302517

代码如下：

filePreview.canPreview(uiContext, this.filebean.url).then((result) => { // 此处返回true
  console.info(`Succeeded in obtaining the result of whether it can be previewed. result = ${result}`);
  let uiContext = getContext(this);
  let fileInfo: filePreview.PreviewInfo = {
    title: this.filebean.name,
    uri: this.filebean.url,
    mimeType: 'image/' + new SavePhotoUtils().getFileNameWithoutExtension(this.filebean.name)
  };
  let files: Array<filePreview.PreviewInfo> = new Array();
  files.push(fileInfo);
  filePreview.openPreview(uiContext, files, 0).then(() => {
    console.info('Succeeded in opening preview');
  }).catch((err: BusinessError) => {
    console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
  });
}).catch((err: BusinessError) => {
  console.error(`Failed to obtain the result of whether it can be previewed, err.code = ${err.code}, err.message = ${err.message}`);
})

已经跳转到文件预览页面了，但是却是文件预览失败。

Answer 1

方法一：

let filePath = uiContext.filesDir + '/1.jpg';
let uri = fileUri.getUriFromPath(filePath);

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fileuri-V5\#fileurigeturifrompath

方法二：

let uri = 'file://com.xxx/data/storage/el2/base/haps/entry/files/1.jpg'

建议使用canPreview判断资源是否可以被预览，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/preview-filepreview-V5

示例参考：

import { BusinessError, request } from '@kit.BasicServicesKit';
import { filePreview } from '@kit.PreviewKit';
import fs, { ReadOptions } from '@ohos.file.fs';
import { buffer } from '@kit.ArkTS';
import { fileUri } from '@kit.CoreFileKit';

let uiContext = getContext(this);

@Entry
@Component
struct ImagePreview {
  build() {
    Column() {

      Button('下载')
        .onClick(() => {
          console.log('---', uiContext.filesDir)
          try {
            request.downloadFile(uiContext, {
              url: 'https://xxx',
              filePath: uiContext.filesDir + '/1.jpg'
            }).then((downloadTask: request.DownloadTask) => {
              downloadTask.on('complete', () => {
                console.info('download complete');
                let file = fs.openSync(uiContext.filesDir + '/1.jpg', fs.OpenMode.READ_WRITE);
                let arrayBuffer = new ArrayBuffer(1024);
                let readLen = fs.readSync(file.fd, arrayBuffer);
                let buf = buffer.from(arrayBuffer, 0, readLen);
                console.info(`The content of file: ${buf.toString()}`);
                fs.closeSync(file);
              })
            }).catch((err: BusinessError) => {
              console.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
            });
          } catch (error) {
            let err: BusinessError = error as BusinessError;
            console.error(`Invoke downloadFile failed, code is ${err.code}, message is ${err.message}`);
          }
        })

      Button('预览').onClick(() => {
        let filePath = uiContext.filesDir + '/1.jpg';
        let uri = fileUri.getUriFromPath(filePath);

        filePreview.canPreview(uiContext, uri).then((result) => { // 传入支持的文件类型且项目存在时会返回true
          console.info(`Succeeded in obtaining the result of whether it can be previewed. result = ${result}`);
        }).catch((err: BusinessError) => {
          console.error(`Failed to obtain the result of whether it can be previewed, err.code = ${err.code}, err.message = ${err.message}`);
        });

        let fileInfo: filePreview.PreviewInfo = {
          title: '1.jpg',
          uri: uri,
          mimeType: 'image/jpg'
        };
        let files: Array<filePreview.PreviewInfo> = new Array();
        files.push(fileInfo);
        filePreview.openPreview(uiContext, files, 0).then(() => {
          console.info('Succeeded in opening preview');
        }).catch((err: BusinessError) => {
          console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
        });
      })
    }
  }
}