51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

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

鸿蒙时代
发布于 2024-5-8 10:53
浏览
0收藏
最新收录于
鸿蒙时代 蛟龙腾飞鸿蒙成长路上知识共享
查看专栏

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>


  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

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

分类
其他
标签
Web上传文件
赞
收藏
回复
举报


回复
    相关推荐
    这个用户很懒，还没有个人简介
    觉得TA不错？点个关注精彩不错过
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    华为支付-免密支付接入支付并签约场景 0回复
    华为支付-平台类商户合单支付场景准备 0回复
    华为支付-商户基础支付场景准备 0回复
    HarmonyOS NEXT 原生应用/元服务-DevEco Profiler性能问题定界实时监控 0回复
    华为支付-免密支付接入签约代扣场景准备 0回复
    相关问题
    HarmonyOS 元服务应用跳转 1回答
    HarmonyOS 应用的类型能否从元服务改成非元服务 1回答
    元服务登录模块，根据《元服务开发指南》通过api登录实现代码报错，提示不支持元服务。 1回答
    HarmonyOS 生成应用描述文件并上传至服务器 1回答
    HarmonyOS web组件上传文件 1回答
    社区精华内容