HarmonyOS Web加载的网页怎么允许读取app沙箱路径下的文件

Web组件加载完成了网页，此时网页内要读取app沙箱路径下的文件，读取是通过访问这串链接进行的file://data/storage/el2/base/haps/entry/files/1719395161522.jpg

但此时js里抛出一个错误：Not allowed to load local resource: file://data/storage/el2/base/haps/entry/files/1719395161522.jpg

如何加载正确web端将显示沙箱里的这张图片

HarmonyOS

shlp

2024-12-27 16:00:48

浏览

回答 1

按赞同

按时间

zbw_apple

可以通过转图片为base64格式后再用h5加载

//Demo.ets:

import { common } from '@kit.AbilityKit';
import { util } from '@kit.ArkTS';
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Demo {
  webController: webview.WebviewController = new webview.WebviewController();
  @State test: Test = new Test()
  build() {
    Column(){
      Web({src:$rawfile('index2.html'),controller:this.webController})
        .javaScriptProxy({
          object: this.test,
          name: "picture",
          methodList: ["takePhoto"],
          controller: this.webController
        }).height("50%")
    }
  }
}
class Test{
  takePhoto() {
    let context = getContext(this) as common.UIAbilityContext
    let arrayBuff = context.resourceManager.getRawFileContentSync("startIcon.png")
    let base64helper = new util.Base64Helper()
    let base64string = base64helper.encodeToStringSync(arrayBuff,util.Type.MIME)
    console.debug(base64string)
    return base64string
  }
}
//index.html:

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .disable-longpress {
  user-select: none; /* 禁止文本选择 */
}
</style>
  <body>
  <button id="init" onclick="takePicture()">模拟拍照</button>
  <img src="" id="myImage" alt="">
  </body>
  </html>
  <script>
  function takePicture() {
    let s = 'data:image/png;base64,' + picture.takePhoto();
    console.log(s)
    document.getElementById('myImage').src =  s;
  }
  </script>
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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

2024-12-27 17:58:46

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web加载的网页怎么允许读取app沙箱路径下的文件

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