鸿蒙5.0版开发：应用框架ArkWeb开发-上传文件

最新推荐文章于 2025-05-19 18:02:07 发布

炫酷盖茨猫先生

最新推荐文章于 2025-05-19 18:02:07 发布

阅读量1.1k

点赞数 24

分类专栏： ArkUI框架鸿蒙5.0开发 ArkWeb 文章标签： harmonyos 华为 android ArkUI ArkTS 前端鸿蒙系统

本文链接：https://blog.csdn.net/m0_73088370/article/details/144084757

版权

鸿蒙5.0开发同时被 3 个专栏收录

959 篇文章

订阅专栏

ArkUI框架

587 篇文章

订阅专栏

ArkWeb

33 篇文章

订阅专栏

往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

上传文件

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求，如果应用开发者不做任何处理，Web会提供默认行为来处理前端页面文件上传的请求。

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

应用侧代码。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked');
          const documentSelectOptions = new picker.DocumentSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.DocumentViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            uri = documentSelectResult[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}

local.html页面代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
<!-- 点击上传文件按钮 -->
<input type="file" value="file"></br>
<meta name="viewport" content="width=device-width" />
</body>
</html>