web组件onShowFileSelector事件，里面使用弹框（相机/文件按钮），或者判断前端input要调用的类型

// xxx.ets 
import web_webview from '@ohos.web.webview'; 
import picker from '@ohos.file.picker'; 
import { BusinessError } from '@ohos.base'; 
import { promptAction } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct Index { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: ShowDialog({}) 
  }) 
  @Provide event: CustomEvent | undefined = undefined 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          this.dialogController.open() 
          this.event = event 
          return true 
        }) 
    } 
  } 
} 
 
@CustomDialog 
struct ShowDialog { 
  @Consume event: CustomEvent 
  @State choice: string = '' 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: ShowDialog({}) 
  }) 
 
  handle(param: CustomEvent) { 
    if (this.choice === '文件') { 
      console.log(`当前的选择是2${this.choice}`) 
      console.log('MyFileUploader onShowFileSelector invoked') 
      const documentSelectOptions = new picker.DocumentSelectOptions(); 
      let uri: string | null = null; 
      const documentViewPicker = new picker.DocumentViewPicker(); 
      documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => { 
        uri = documentSelectResult[0]; 
        console.info('documentViewPicker.select to file succeed and uri is:' + uri); 
        if (this.event) { 
          this.event.result.handleFileList([uri]); 
        } 
      }).catch((err: BusinessError) => { 
        console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 
      }) 
    } else if (this.choice === '相机') { 
      promptAction.showToast({ message: '正在开发中' }) 
    } 
  } 
 
  build() { 
    Column({ space: 10 }) { 
      Button('文件') 
        .onClick(() => { 
          this.choice = '文件' 
          this.handle(this.event) 
          this.controller.close() 
        }) 
      Button('相机') 
        .onClick(() => { 
          this.choice = '相机' 
          this.handle(this.event) 
          this.controller.close() 
        }) 
    }.width("100%") 
    .height(400) 
    .justifyContent(FlexAlign.Center) 
  } 
} 
 
interface CustomEvent { 
  result: FileSelectorResult, 
  fileSelector: FileSelectorParam 
}
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.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.