HarmonyOS鸿蒙Next中Web组件如何展示沙箱路径文件

HarmonyOS鸿蒙Next中Web组件如何展示沙箱路径文件

【问题现象】

前端通过webview无法加载沙箱图片与视频，无法预览播放。

调用photoAccessHelper.PhotoViewPicker()方法获取相册图片、视频，返回沙盒地址给webview展示、预览等，尝试了两种路径，前端均不能正常加载。

第一种尝试路径：file://media/Photo/1/IMG_1725345074_000/screenshot_xxx.jpg。

第二种尝试路径：/data/storage/el2/base/haps/QYEntry/files/photosxxx.jpg。

【背景知识】

应用沙箱是一种以安全防护为目的的隔离机制，避免数据受到恶意路径穿越访问。

参考资料

应用沙箱目录

【解决方案】

端侧通过Web组件加载html文件，实现与网页端交互。

示例代码如下：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController()
  @State url:Resource = $rawfile('test.html')

  build() {
    Column() {
      Web({src:this.url, controller:this.controller})
        .webStyle()
        .width('100%')
        .height('100%')
    }
    .height('100%')
    .width('100%')
  }
}

@Extend(Web)
function webStyle() {
  .domStorageAccess(true)
  .zoomAccess(true)
  .fileAccess(true)
  .mixedMode(MixedMode.All)
  .cacheMode(CacheMode.Default)
  .javaScriptAccess(true)
}

网页端通过file:// + 沙箱地址加载图片，实现图片的预览功能。

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
      charset="utf-8"
    />
    <script></script>
  </head>
  <body>
    <form id="upload-form" enctype="multipart/form-data">
      <!-- 添加一个图片元素用于展示图片 -->
      <img src="file:///data/storage/el2/base/haps/entry/cache/img/img.png" />
      <span>11111111</span>
    </form>
    <div id="155134"></div>
  </body>
</html>

更多关于HarmonyOS鸿蒙Next中Web组件如何展示沙箱路径文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Web组件如何展示沙箱路径文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件展示沙箱路径文件时，需确保路径格式正确且文件权限允许访问。示例中，网页端通过file://协议加载沙箱路径文件，如file:///data/storage/el2/base/haps/entry/cache/img/img.png。确保Web组件的fileAccess属性设置为true，以允许访问本地文件。

回到顶部