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

河曲智叟 · 4 天前

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

鸿蒙开发焦点知识点，看这篇文章就够了
最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
鸿蒙HarmonyOS NEXT开发技能最全学习路线指南
鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

上传文件

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的哀求，如果应用开发者不做任何处理，Web会提供默认举动来处理前端页面文件上传的哀求。
下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传哀求，在此接口中开发者将上传的本地文件路径设置给前端页面。

应用侧代码。
1. // xxx.ets
2. import { webview } from '@kit.ArkWeb';
3. import { BusinessError } from '@kit.BasicServicesKit';
4. import { picker } from '@kit.CoreFileKit';
6. @Entry
7. @Component
8. struct WebComponent {
9. controller: webview.WebviewController = new webview.WebviewController();
11. build() {
12. Column() {
13. Web({ src: $rawfile('local.html'), controller: this.controller })
14. .onShowFileSelector((event) => {
15. console.log('MyFileUploader onShowFileSelector invoked');
16. const documentSelectOptions = new picker.DocumentSelectOptions();
17. let uri: string | null = null;
18. const documentViewPicker = new picker.DocumentViewPicker();
19. documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
20. uri = documentSelectResult[0];
21. console.info('documentViewPicker.select to file succeed and uri is:' + uri);
22. if (event) {
23. event.result.handleFileList([uri]);
24. }
25. }).catch((err: BusinessError) => {
26. console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
27. })
28. return true;
29. })
30. }
31. }
32. }
复制代码
local.html页面代码。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Document</title>
6. </head>
8. <body>
9. 
10. <input type="file" value="file"></br>
11. <meta name="viewport" content="width=device-width" />
12. </body>
13. </html>
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云