1# 上传文件 2 3 4Web组件支持前端页面选择文件上传功能，应用开发者可以使用[onShowFileSelector()](../reference/arkui-ts/ts-basic-components-web.md#onshowfileselector9)接口来处理前端页面文件上传的请求。 5 6 7下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在[onShowFileSelector()](../reference/arkui-ts/ts-basic-components-web.md#onshowfileselector9)接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。 8 9 10- 应用侧代码。 11 12 ```ts 13 // xxx.ets 14 import web_webview from '@ohos.web.webview'; 15 16 @Entry 17 @Component 18 struct WebComponent { 19 controller: web_webview.WebviewController = new web_webview.WebviewController() 20 build() { 21 Column() { 22 // 加载本地local.html页面 23 Web({ src: $rawfile('local.html'), controller: this.controller }) 24 .onShowFileSelector((event) => { 25 // 开发者设置要上传的文件路径 26 let fileList: Array<string> = [ 27 'xxx/test.png', 28 ] 29 if (event) { 30 event.result.handleFileList(fileList) 31 } 32 return true; 33 }) 34 } 35 } 36 } 37 ``` 38 39 40- local.html页面代码。 41 42 ```html 43 <!DOCTYPE html> 44 <html> 45 <head> 46 <meta charset="utf-8"> 47 <title>Document</title> 48 </head> 49 50 <body> 51 <!-- 点击上传文件按钮 --> 52 <input type="file" value="file"></br> 53 </body> 54 </html> 55 ``` 56
