HarmonyOS 鸿蒙Next 通过onShowFileSelector方法监听文件或图片选择时如何区分

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 通过onShowFileSelector方法监听文件或图片选择时如何区分

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onshowfileselector9 demo中都是通过onShowFileSelector这个方法来监听文件或者图片选择，那如何区分到底是文件选择还是图片选择呢？ Web组件又是如何监听拍照事件的呢？ h5页面发起图片或者文件选择，或者拍照动作

Harmonyos Next教程
3 回复
onShowFileSelector函数目前没有参数判断，这个api只是前端点击 input组件的回调。

拉起文件，还是相册，还是相机，需要ArkTS侧使用对应的 文件picker 或者相机应用。这两者是分离的。文件就是filepicker 相册就是PhotoViewPicker。

可以参考一下这个文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-file-upload-0000001774120274-V5

文档中 import picker from ‘[@ohos](/user/ohos).file.picker’; 要拉什么就引入对应的类

可以参考以下demo：

import web_webview from '[@ohos](/user/ohos).web.webview';
import { BusinessError } from '[@ohos](/user/ohos).base';
import { camera, cameraPicker } from '[@kit](/user/kit).CameraKit';
const LOCAL_HTML_PATH: string = "camera.html";
// HTML页面中input标签调用ArkTS方法的返回结果
class FileResult {
  // 用于通知Web组件文件选择的结果
  result: FileSelectorResult;
  // 文件选择器的相关信息
  fileSelector: FileSelectorParam;
  constructor(result: FileSelectorResult, fileSelector: FileSelectorParam) {
    this.result = result;
    this.fileSelector = fileSelector;
  }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct WebGetCameraImageView {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      // TODO：知识点：Web组件通过onShowFileSelector接口，处理具有“文件”输入类型的HTML表单，响应用户按下的“选择文件”按钮，
      //  并通过event对象，将选择的图片/文件路径返回给input标签中onchange属性调用的js方法。
      //  onShowFileSelector接口的用法，可参考官方文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onshowfileselector9
      Web({ src: $rawfile(LOCAL_HTML_PATH), controller: this.controller })
        .onShowFileSelector((event: FileResult) => { // event表示文件选择事件，其中result可以存储选择的图片/文件片路径，fileSelector可以设置文件选择器的部分属性
          // 调用invokeCamera接口，拉起原生相机进行拍照，并将照片路径放到uri中返回
          this.invokeCamera(((uri: string) => {
            // 将照片路径uri放到一个数组中，通过系统接口handleFileList将图片/文件的选择结果通知给Web组件，
            // 可参考官方文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#handlefilelist9
            event?.result.handleFileList([uri]);
          }))
          // 当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，绘制的自定义弹窗无效。
          return true;
        })
    }
  }
  /**
   * 调用系统相机，拍照后返回图片地址
   *
   * [@param](/user/param) callback 回调接口，返回照片的路径
   */
  async invokeCamera(callback: (uri: string) => void) {
    try {
      let pickerProfile: cameraPicker.PickerProfile = {
        cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
      };
      let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(),
        [cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO], pickerProfile);
      console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
      if (callback && pickerResult) {
        callback(pickerResult.resultUri);
      }
    } catch (error) {
      let err = error as BusinessError;
      console.error(`the pick call failed. error code: ${err.code}`);
    }
  }
}
  <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  <style>
  body {
  font-family: Arial, Helvetica, sans-serif, sans-serif;
  text-align: center;
  background-color: #f2f2f2;
  padding: 20px;
}
#image {
  display: none;
  max-width: 100%;
  height: auto;
  margin-top: 15px;
}
#image_preview {
  display: none;
  margin-top: 15px;
}
</style>
  </head>
  <body>
  <script>
  // 显示ArkTS返回的图片
  function showPic() {
    // input标签的onchange事件触发时，返回的的描述事件所有相关信息的对象，此处接收ArkTS中onShowFileSelector接口的返回结果
    let event = this.event;
    let tFile = event ? event.target.files : [];
    // 如果返回的图片列表是空的，则不显示
    if (tFile === 0) {
      document.getElementById('image_preview').style.display = 'block';
      document.getElementById('image_preview').innerHTML = "未选择图片";
      return;
    }
    document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
    document.getElementById('image_preview').style.display = 'block';
    document.getElementById('image').style.display = 'block';
  }
  </script>
  <input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()"/>
  <p id="image_preview">图片预览</p>
  <img id="image">
  </body>
  </html>

这里和你区分文件选择还是图片选择没有任何关系，你需要自己调用文件选择器。

参考示例：

鸿蒙网络编程系列22-Web组件文件上传示例

在HarmonyOS鸿蒙系统中，通过onShowFileSelector方法监听文件或图片选择时，要区分用户选择的是文件还是图片，通常可以通过以下几种方式实现：

  1. MIME类型判断：在选择文件时，系统会返回文件的MIME类型。你可以通过检查MIME类型来区分文件类型。例如，图片文件的MIME类型通常以image/开头，如image/jpeg、image/png等。

  2. 文件扩展名判断：获取选择文件的路径后，可以解析文件的扩展名来判断文件类型。如.jpg、.png为图片文件，而其他如.txt、.doc等则为其他类型的文件。

  3. 用户意图判断：在调用onShowFileSelector之前，可以通过UI或用户交互明确提示用户选择文件类型，从而在逻辑上区分用户的选择意图。

在实际开发中，通常会结合上述方法来实现更准确的文件类型判断。例如，首先通过MIME类型进行初步判断，再结合文件扩展名进行二次验证，以提高判断的准确性和可靠性。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部