harmony 鸿蒙Uploading Files

  • 2023-06-24
  • 浏览 (501)

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>

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Web

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Web Component Overview

harmony 鸿蒙Managing Cookies and Data Storage

harmony 鸿蒙Debugging Frontend Pages by Using DevTools

harmony 鸿蒙Managing Location Permissions

harmony 鸿蒙Invoking Frontend Page Functions on the Application

harmony 鸿蒙Invoking Application Functions on the Frontend Page

harmony 鸿蒙Opening Pages in a New Window

harmony 鸿蒙Loading Pages by Using the Web Component

0  赞