上传文件
Web组件支持前端页面选择文件上传功能,应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。
下面的示例中,当用户在前端页面点击文件上传按钮,应用侧在onShowFileSelector()接口中收到文件上传请求,在此接口中开发者将上传的本地文件路径设置给前端页面。
-
应用侧代码。
// xxx.ets import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: WebController = new WebController() build() { Column() { // 加载本地local.html页面 Web({ src: $rawfile('local.html'), controller: this.controller }) .onShowFileSelector((event) => { // 开发者设置要上传的文件路径 let fileList: Array<string> = [ 'xxx/test.png', ] event.result.handleFileList(fileList) return true; }) } } }
-
local.html页面代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <!-- 点击上传文件按钮 --> <input type="file" value="file"></br> </body> </html>