harmony 鸿蒙Uploading Files

2023-06-24
浏览 (502)

Uploading Files

The Web component supports file uploading on a frontend page. You can use onShowFileSelector() to process file upload requests sent from a frontend page.

In the following example, when a user clicks the Upload button on the frontend page, the application receives a file upload request through onShowFileSelector(), which carries the path of the local file to be uploaded.

Application code:

  // xxx.ets
  import web_webview from '@ohos.web.webview';

  @Entry
  @Component
  struct WebComponent {
    controller: WebController = new WebController()
    build() {
      Column() {
        // Load the local.html page.
        Web({ src: $rawfile('local.html'), controller: this.controller })
          .onShowFileSelector((event) => {
              // Set the path of the local file to be uploaded.
             let fileList: Array<string> = [
                'xxx/test.png',
             ]
             if (event) {
                event.result.handleFileList(fileList)
             }
             return true;
          })
      }
    }
  }

Code of the local.html page:

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>Document</title>
  </head>
  
  <body>
  <!-- Click the Upload button -->
  <input type="file" value="file"></br>
  </body>
  </html>