HarmonyOS 网页唤起图片选择，文件选择框突兀

APP内嵌入网页(网页使用uniapp框架)，网页选择图片上传，触发后弹起文件选择框，未让用户选择就直接进入了图库。导致用户选择图片返回后，还能看到选择框。

HarmonyOS

zxjiu

2024-12-25 14:32:26

浏览

回答 1

按赞同

按时间

superinsect

可以参考demo的实现：

// WebComponent.ets
import { webview } from '@kit.ArkWeb';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked');
          const documentSelectOptions = new picker.PhotoSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.PhotoViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            console.log('[documentSelectResult]',JSON.stringify(documentSelectResult))
            console.log('[documentSelectResult]',JSON.stringify(documentSelectResult.photoUris[0]))
            uri = documentSelectResult.photoUris[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}

// index.html
<!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>
  <body>
  <form id="upload-form" enctype="multipart/form-data">
  <input ref="album" type="file" id="upload" name="upload" accept="*/*" onchange="showPic()"/>
  <p id="image_preview">图片预览</p>
  <img id="image" width="100%"/>
  </form>
  </body>
  </html>
  <script>
  function showPic() {
    let event = this.event;
    let tFile = event ? event.target.files : [];
    if (tFile === 0) {
      document.getElementById('image_preview').style.display = 'block';
      document.getElementById('image_preview').innerHTML = "未选择图片";
      return
    }
    document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
    document.getElementById('image_preview').style.display = 'block';
    document.getElementById('image').style.display = 'block';
  }
  </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.
58.
59.
60.
61.
62.
63.

2024-12-25 16:43:45

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 网页唤起图片选择，文件选择框突兀

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