鸿蒙原生应用元服务开发-Web上传文件

Web组件支持前端页面选择文件上传功能,应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。

下面的示例中,当用户在前端页面点击文件上传按钮,应用侧在onShowFileSelector()接口中收到文件上传请求,在此接口中开发者将上传的本地文件路径设置给前端页面。

应用侧代码。

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 加载本地local.html页面
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
            // 开发者设置要上传的文件路径
           let fileList: Array<string> = [
              'xxx/test.png',
           ]
           if(event){
              event.result.handleFileList(fileList)
           }
           return true;
        })
    }
  }
}
local.html页面代码。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>

本文参考引用HarmonyOS官方开发文档,基于API9。

 

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 21:04:08       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 21:04:08       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 21:04:08       82 阅读
  4. Python语言-面向对象

    2024-05-09 21:04:08       91 阅读

热门阅读

  1. 2023-2024年电力行业报告合集(精选69份)

    2024-05-09 21:04:08       42 阅读
  2. linux不同引号的含义(随手记)

    2024-05-09 21:04:08       33 阅读
  3. 单选按钮选中后取消

    2024-05-09 21:04:08       37 阅读
  4. 解析React Hooks的工作原理与影响

    2024-05-09 21:04:08       34 阅读
  5. 【js开发记录笔记】js开发记录笔记

    2024-05-09 21:04:08       27 阅读
  6. 【LeetCode题库】197. 上升的温度 —— 连接查询

    2024-05-09 21:04:08       37 阅读
  7. 深度学习中的backbone特征提取器

    2024-05-09 21:04:08       31 阅读
  8. 英语单词学习

    2024-05-09 21:04:08       25 阅读