HarmonyOS Next开发学习手册——管理网页文件上传与下载

最新推荐文章于 2025-12-12 13:55:15 发布

原创

最新推荐文章于 2025-12-12 13:55:15 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #深度学习 #组件化开发 #移动开发 #前端 #web组件

上传文件

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>

使用Web组件的下载能力

监听页面触发的下载

通过 setDownloadDelegate() 向Web组件注册一个DownloadDelegate来监听页面触发的下载任务。资源由Web组件来下载，Web组件会通过DownloadDelegate将下载的进度通知给应用。

下面的示例中，在应用的rawfile中创建index.html以及download.html。应用启动后会创建一个Web组件并加载index.html，点击setDownloadDelegate按钮向Web组件注册一个DownloadDelegate,，点击页面里的下载按钮的时候会触发一个下载任务，在DownloadDelegate中可以监听到下