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 @Entry 16 @Component 17 struct WebComponent { 18 controller: WebController = new WebController() 19 build() { 20 Column() { 21 // 加载本地local.html页面 22 Web({ src: $rawfile('local.html'), controller: this.controller }) 23 .onShowFileSelector((event) => { 24 // 开发者设置要上传的文件路径 25 let fileList: Array<string> = [ 26 'xxx/test.png', 27 ] 28 event.result.handleFileList(fileList) 29 return true; 30 }) 31 } 32 } 33 } 34 ``` 35 36 37- local.html页面代码。 38 39 ```html 40 <!DOCTYPE html> 41 <html> 42 <head> 43 <meta charset="utf-8"> 44 <title>Document</title> 45 </head> 46 47 <body> 48 <!-- 点击上传文件按钮 --> 49 <input type="file" value="file"></br> 50 </body> 51 </html> 52 ``` 53
