1. web组件文件上传功能简介
鸿蒙的web组件可以加载网页，如果网页本身具备文件上传功能的话就比较尴尬了，因为html上传文件时，允许用户选择本地文件，但是鸿蒙因为安全性的考虑，只允许操作沙箱中的文件，所以在web组件中的上传功能本身无法直接使用。如果一定要使用的话，就要另辟蹊径，既然不允许选择本地文件，那么，我们给它提供沙箱中的文件就好了，web组件提供了onShowFileSelector事件，在处理具有“文件”输入类型的HTML表单时，如果用户按下“选择文件”按钮，会触发该事件，该事件的定义如下：
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
其中，参数result为FileSelectorResult类型，是重点要处理的对象，它提供了handleFileList方法，可以通知web组件选择的沙箱文件，定义如下：
handleFileList(fileList: Array<string>): void
参数fileList就是需要进行操作的文件列表。
onShowFileSelector其他的参数说明可以参考相关文档。
2. web组件文件上传文件示例
本示例运行后的界面如下所示：
该示例允许上传三种文件类型，第一种是资源文件，也就是在开发期间通过rawfile添加的文件，第二种是图片文件，会打开图片选择器让用户选择图片，第三种是普通文件，允许用户选择任意类型的文件。
下面详细介绍创建该应用的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [{"name": "ohos.permission.INTERNET"}]
这里添加了获取互联网信息的权限。
步骤3：资源目录添加demo.txt文件，示意图如下：
步骤4：在Index.ets文件里添加如下的代码：
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct Index {//要加载的网址@State webUrl: string = "http://192.168.100.102:8081/index"//文件的沙箱路径sandboxFilePath: string = ""
//上传文件的类型，0：资源文件；1：图像文件；2：普通文件，默认图像文件uploadFileType = 1
scroller: Scroller = new Scroller()controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {Row() {Column() {Text("Web组件文件上传示例").fontSize(14).fontWeight(FontWeight.Bold).width('100%').textAlign(TextAlign.Center).padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Text("网址：").fontSize(14).width(50).flexGrow(0)
TextInput({ text: this.webUrl }).onChange((value) => {this.webUrl = value}).width(110).fontSize(11).flexGrow(1)
Button("加载").onClick(() => {this.controller.loadUrl(this.webUrl);}).width(60).fontSize(14).flexGrow(0)}.width('100%').padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Text("上传文件类型：").fontSize(14).width(150).flexGrow(0)}.width('100%').padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Column() {Radio({ value: '', group: 'radioGroup' }).checked(this.uploadFileType === 0).height(30).width(100).onChange((isChecked: boolean) => {if (isChecked) {this.uploadFileType = 0}})Text('资源文件')}
Column() {Radio({ value: '', group: 'radioGroup' }).checked(this.uploadFileType === 1).height(30).width(100).onChange((isChecked: boolean) => {if (isChecked) {this.uploadFileType = 1}})Text('图片文件')}
Column() {Radio({ value: '', group: 'radioGroup' }).checked(this.uploadFileType === 2).height(30).width(100).onChange((isChecked: boolean) => {if (isChecked) {this.uploadFileType = 2}})Text('普通文件')}}.width('100%').padding(5)
Scroll(this.scroller) {Web({ src: this.webUrl, controller: this.controller }).padding(10).width('100%').textZoomRatio(150).backgroundColor(0xeeeeee).onShowFileSelector((event) => {this.selectFile().then((selected) => {if (selected) {let fileList: Array<string> = [this.sandboxFilePath,]event.result.handleFileList(fileList)}})return true})}.align(Alignment.Top).backgroundColor(0xeeeeee).height(300).flexGrow(1).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarWidth(20)}.width('100%').justifyContent(FlexAlign.Start).height('100%')}.height('100%')}
//选择上传的文件async selectFile(): Promise<boolean> {//资源文件中的demo.txtif (this.uploadFileType == 0) {return this.copyResFile2Sandbox("demo.txt")} else if (this.uploadFileType == 1) {//选择图像文件let imgPicker = new picker.PhotoViewPicker();let result = await imgPicker.select();if (result.photoUris.length > 0) {return this.copySelFile2Sandbox(result.photoUris[0])}return false} else {//选择任意文件let filePicker = new picker.DocumentViewPicker();let result = await filePicker.select();if (result.length > 0) {return this.copySelFile2Sandbox(result[0])}return false}}
//复制资源文件到沙箱async copyResFile2Sandbox(resFile: string): Promise<boolean> {let context = getContext(this)//计划复制到的目标路径let realUri = context.cacheDir + "/" + resFilelet rawFd = await context.resourceManager.getRawFd(resFile)
//复制资源文件到沙箱cache文件夹try {fs.copyFileSync(rawFd.fd, realUri)this.sandboxFilePath = realUrireturn true} catch (err) {console.error(err.message)}return false}
//复制选中文件到沙箱copySelFile2Sandbox(selectFile: string): boolean {let context = getContext(this)let segments = selectFile.split('/')//文件名称let fileName = segments[segments.length-1]//计划复制到的目标路径let realUri = context.cacheDir + "/" + fileName//复制选择的文件到沙箱cache文件夹try {let file = fs.openSync(selectFile);fs.copyFileSync(file.fd, realUri)this.sandboxFilePath = realUrireturn true} catch (err) {console.error(err.message)}return false}
}
步骤5：编译运行，可以使用模拟器或者真机。
步骤6：输入包含上传功能的网页，然后单击“加载”按钮，加载网页。
步骤7：选择“资源文件”类型，然后单击web组件中的“选择文件”按钮，会选择资源文件中的demo.txt文件：
步骤8：单击“上传文件”按钮，会上传到服务端，在服务端可以看到上传的文件。
步骤9：选择“图片文件”类型，然后单击web组件中的“选择文件”按钮，会弹出图片选择器，然后选择其中一张图片：
步骤10：单击“完成”按钮，然后单击“上传文件”按钮，会上传到服务端。
步骤11：选择“普通文件”类型，然后单击web组件中的“选择文件”按钮，会弹出文件选择器，然后选择任意文件：
步骤12：同样，单击“上传文件”按钮，会上传到服务端。
这样就完成了多种文件类型的web组件上传。
3. 上传功能分析
在这三种方式中，本质上都是把文件复制到沙箱，然后把沙箱文件路径给web组件，其中比较复杂的是第一种，就是资源文件。资源文件和其他文件不太一样，不能直接复制到沙箱，而是先通过resourceManager得到资源文件RawFd，然后得到fd，最后使用该fd进行复制，代码如下：
//复制资源文件到沙箱async copyResFile2Sandbox(resFile: string): Promise<boolean> {let context = getContext(this)//计划复制到的目标路径let realUri = context.cacheDir + "/" + resFilelet rawFd = await context.resourceManager.getRawFd(resFile)
//复制资源文件到沙箱cache文件夹try {fs.copyFileSync(rawFd.fd, realUri)this.sandboxFilePath = realUrireturn true} catch (err) {console.error(err.message)}return false}
另外两种都是复制普通文件到沙箱的方式，在前述文章中都多次使用，就不赘述了。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/UploadInWeb
本系列源码地址：
https://gitee.com/zl3624/harmonyos_network_samples