#跟着若城学鸿蒙# web篇-文件选择-CSDN博客

本文链接：https://blog.csdn.net/huangyuan_xuan/article/details/148022135

前言

前端业务中经常遇到需要使用手机上文件的情况，比如更换头像，上传记录等。我们来看下在鸿蒙上如何实现。

web组件

当我们不做任何处理的时候，web组件会提供默认行为来处理前端页面文件上传的请求。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebCamera</title>
</head>
<body>
<input type="file" name="photo" id="photo"><br>
<img style="display: none;width:200px;" id="img">
<script>
    let photo = document.getElementById("photo");
    photo.addEventListener("change", preViewImg)
    function preViewImg(event) {
        let fileReader = new FileReader();
        let img = document.getElementById("img");
        fileReader.addEventListener(
            "load",
            () => {
                // 将图像文件转换为 Base64 字符串
                img.src = fileReader.result;
            },
            false,
        );
        fileReader.readAsDataURL(event.target.files[0]);
        img.style.display = "block";
    }
</script>
</body>
</html>

在web组件上，我们可以获取对应的参数

            //文件选择  用于通知Web组件文件选择的结果。
            // 返回值boolean。当返回值为true时，用户可以调用系统提供的弹窗能力。当返回值为false时，函数中绘制的自定义弹窗无效。
          .onShowFileSelector((event) => {
            let title = event.fileSelector.getTitle()
            let mode = event.fileSelector.getMode()
            let types: string[] = event.fileSelector.getAcceptType()
            let isCapture = event.fileSelector.isCapture()
            console.error(`title:${title} ,mode:${mode} ,types:${types} ,isCapture:${isCapture} `)
            return false;
          })

效果图

获取到的参数： title:open file ,mode:0 ,types: ,isCapture:false

限定类型

当我们在前端页面上限定类型之后：

<input type="file" name="photo" accept="image/*" id="photo"><br>

在鸿蒙上还是不做处理的时候

由于前端只接收图片类型，这里我们可以在鸿蒙侧看到传入的参数

title:open file ,mode:0 ,types:.tif,.pjp,.jfif,.bmp,.webp,.svg,.gif,.svgz,.jpg,.hevc,.jpeg,.pjpeg,.png,.ico,.avif,.apng,.heic,.xbm,.tiff,.heif ,isCapture:false

同时弹出使用哪个应用来相应的选择框。即使我们选择了文件，打开之后也是只能选择图片类型，其他类型的文件是灰色不可选中状态

自定义选择

当然我们也可以自己控制，在web组件的onShowFileSelector方法中返回true，表示我们自己处理这个事件，不需要系统默认响应
在web组件中

          .onShowFileSelector((event) => {
            let title = event.fileSelector.getTitle()
            let mode = event.fileSelector.getMode()
            let types: string[] = event.fileSelector.getAcceptType()
            let isCapture = event.fileSelector.isCapture()
            console.error(`title:${title} ,mode:${mode} ,types:${types} ,isCapture:${isCapture} `)
            this.selectFile(event.result);
            return true;
          })

  async selectFile(result: FileSelectorResult): Promise<void> {
    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    // 过滤选择媒体文件类型为IMAGE
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    // 设置最大选择数量
    photoSelectOptions.maxSelectNumber = 5;
    let chooseFile: picker.PhotoSelectResult = await photoPicker.select(photoSelectOptions);
    // 获取选择的文件列表
    result.handleFileList(chooseFile.photoUris);
  }