问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS Web组件的onShowFileSelector拿不到网页input组件的accept参数？

头像
HarmonyOS码上奇行
    12.2k16322

    例如：

    <input type="file" name="image" maxlength="1" accept="image/*">

    Web组件的onShowFileSelector返回的参数拿不到上面的accept里的"image/*的值，分不清是要用文件还是图片还是视频。

    HarmonyOSharmonyosharmonyos-next
    阅读 454
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16322

      可以在h5中定义一个获取accept的函数，然后在web组件合适的时机获取accept，参考示例如下：

      1.index.ets

      // xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';

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

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageEnd(e => {
        })
        .onShowFileSelector((event) => {
          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];
            try {
              this.controller.runJavaScript(
                'test()',
                (error, result) => {
                  if (error) {
                    console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                    return;
                  }
                  if (result) {
                    //这里是要获取的accept
                    console.log(result);
                  }
                });
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
            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
        })
    }
  }
}

      2.index.html

      <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>Document</title>
  </head>

  <body>
  <!-- 点击上传文件按钮 -->
  <input type="file" id="name" name="image" maxlength="1" accept="image/*"></br>
  <meta name="viewport" content="width=device-width" />
  </body>
  <script type="text/javascript">
  function test() {
    const fileInput =  document.getElementById("name")
    return fileInput.accept
  }
  </script>
  </html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题