上傳文件

2024-02-16 13:38 更新

Web組件支持前端頁(yè)面選擇文件上傳功能，應(yīng)用開(kāi)發(fā)者可以使用onShowFileSelector()接口來(lái)處理前端頁(yè)面文件上傳的請(qǐng)求。

下面的示例中，當(dāng)用戶在前端頁(yè)面點(diǎn)擊文件上傳按鈕，應(yīng)用側(cè)在onShowFileSelector()接口中收到文件上傳請(qǐng)求，在此接口中開(kāi)發(fā)者將上傳的本地文件路徑設(shè)置給前端頁(yè)面。

  • 應(yīng)用側(cè)代碼。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. @Entry
    4. @Component
    5. struct WebComponent {
    6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
    7.   build() {
    8.     Column() {
    9.       // 加載本地local.html頁(yè)面
    10.       Web({ src: $rawfile('local.html'), controller: this.controller })
    11.         .onShowFileSelector((event) => {
    12.             // 開(kāi)發(fā)者設(shè)置要上傳的文件路徑
    13.            let fileList: Array<string> = [
    14.               'xxx/test.png',
    15.            ]
    16.            if(event){
    17.               event.result.handleFileList(fileList)
    18.            }
    19.            return true;
    20.         })
    21.     }
    22.   }
    23. }
  • local.html頁(yè)面代碼。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>Document</title>
    6. </head>
    7. 

    8. <body>
    9. // 點(diǎn)擊文件上傳按鈕
    10. <input type="file" value="file"></br>
    11. </body>
    12. </html>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)