HarmonyOS PhotoViewPicker获取图片uri展示问题

PhotoViewPicker选出来的图片有些uri是这样的，导致h5处理图片时处理不了：file://media/Photo/26/IMG_1719308514_019/u=530540642,263790536&fm=253&fmt=auto&app=120&f=JPEG(1).jpeg

一般获取到的图片地址类似于：

file://media/Photo/9/IMG_1716355314_005/screenshot_20240522_132014.jpg

HarmonyOS

fox280

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

file://media/Photo/26/IMG_1719308514_019/u=530540642,263790536&fm=253&fmt=auto&app=120&f=JPEG(1).jpeg

这样的地址类型可以展示，参考DEMO如下：

Index.ets页面中

import web_webview from '@ohos.web.webview'
import picker from '@ohos.file.picker'
import { BusinessError } from '@ohos.base'
import { common } from '@kit.AbilityKit'
import { promptAction } from '@kit.ArkUI'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { fileIo } from '@kit.CoreFileKit'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  //定义一个全局的string类型的数组，用来存放通过picker拉起后选择完图片后图片的uri
  @State uri: Array<string> | null = null;

  aboutToAppear() {
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Image('xxxx')
        .width(100)
        .height(100)
        .objectFit(ImageFit.Contain)

      SaveButton().onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
        if (result === SaveButtonOnClickResult.SUCCESS) {
          const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
          // 免去权限申请和权限请求等环节，获得临时授权，保存对应图片
          let helper = photoAccessHelper.getPhotoAccessHelper(context);
          try {
            // onClick触发后5秒内通过createAsset接口创建图片文件，5秒后createAsset权限收回。
            let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'webp');
            // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
            let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
            context.resourceManager.getMediaContent($r('app.media.1')
              .id, 0)
              .then(async value => {
                let media = value.buffer;
                // 写到媒体库文件中
                await fileIo.write(file.fd, media);
                await fileIo.close(file.fd);
                promptAction.showToast({ message: '已保存至相册！' });
              });
          } catch (error) {
            const err: BusinessError = error as BusinessError;
            console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);
          }
        } else {
          promptAction.showToast({ message: '设置权限失败！' })
        }
      })

      Web({ src: $rawfile('i.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked')
          let PhotoSelectOptions = new picker.PhotoSelectOptions();
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
          PhotoSelectOptions.maxSelectNumber = 1;
          const photoPicker = new picker.PhotoViewPicker();
          photoPicker.select(PhotoSelectOptions).then((photoSelectResult) => {
            this.uri = photoSelectResult.photoUris;
            console.info('photoPicker .select to file succeed and photoSelectResult is:' +
            JSON.stringify(photoSelectResult));
            console.info('photoPicker .select to file succeed and uri is:' + this.uri);
            if (event) {
              event.result.handleFileList(this.uri);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke photoPicker .select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}

html放在rawfile文件夹下。

<!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  <script>
  window.onload = function() {
  // 获取文件输入元素
  var fileInput = document.getElementById('upload');

  // 监听文件输入的改变事件
  fileInput.addEventListener('change', function(e) {
    // 获取选中的文件
    var file = e.target.files[0];
    // 创建一个FileReader对象
    var reader = new FileReader();

    // 定义文件读取完成后的回调函数
    reader.onloadend = function() {
      // 获取图片元素
      var img = document.getElementById('preview');
      // 将读取到的结果赋值给图片元素的src属性
      img.src = reader.result;
    }

    // 读取文件内容
    if (file) {
      reader.readAsDataURL(file);
    }
  });
}
  </script>
  </head>
  <body>
  <form id="upload-form" enctype="multipart/form-data">
  <!-- 修改type属性为camera -->
  <input type="file" id="upload" name="upload" accept="video/mp4" capture="camera"/>
  <!-- 添加一个图片元素用于展示图片 -->
  <img id="preview" />
  </form>
  </body>
  </html>

在module.json5中，添加网络权限。

"requestPermissions": [
{"name": 'ohos.permission.INTERNET'}
]

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS PhotoViewPicker获取图片uri展示问题

订阅鸿蒙技术特刊，精选内容抢先看