【鸿蒙】从网页打开获取文件，并转成base64

 鸿蒙原生代码

import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';
import { fileIo } from '@kit.CoreFileKit';
import util from '@ohos.util';

@Entry
@Component
struct UploadFile {
  controller:web_webview.WebviewController = new web_webview.WebviewController();
  @State uri: Array<string> | null = null;

  // // 将 ArrayBuffer 转换为 Base64 字符串
  // arrayBufferToBase64(buffer: ArrayBuffer): string {
  //   let binary = '';
  //   const bytes = new Uint8Array(buffer);
  //   for (let i = 0; i < bytes.byteLength; i++) {
  //     binary += String.fromCharCode(bytes[i]);
  //   }
  //   return globalThis.btoa(binary); // 使用 btoa 将二进制数据编码为 Base64
  // }
  //
  // btoa(binaryData: Uint8Array) {
  //   // 创建一个Base64Helper实例
  //   let base64Helper = new util.Base64Helper();
  //   // 使用Base64Helper将二进制数据转换为Base64编码的字符串
  //   return base64Helper.encodeToStringSync(new Uint8Array(binaryData));
  // }

  build() {
    Column(){
      Text('选中的图片')
      List(){
        ForEach(this.uri,(item:string)=>{
          ListItem(){
            Row(){
              Image(item)
                .width('30vh')
                .height('30vh')
            }

          }
          .width('30vh')
          .height('30vh')
        })
      }
      .width('30vh')
      .height('30vh')
      Web({
        src:$rawfile('setAttrAndEvent/uploadFile/index.html'),
        controller:this.controller
      }).fileAccess(false)
        .width('100%')
        .height('100vh')
        .backgroundColor('grey')
        .onShowFileSelector((event)=>{
          console.log('MyFileUploader onShowFileSelector invoked')
          let PhotoSelectOptions = new picker.PhotoSelectOptions();
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
          // PhotoSelectOptions.maxSelectNumber = 5;
          PhotoSelectOptions.maxSelectNumber = 1;

          const photoPicker  = new picker.PhotoViewPicker();
          photoPicker .select(PhotoSelectOptions).then(async (photoSelectResult) => {
            this.uri = photoSelectResult.photoUris;
            console.info('photoPicker .select to file succeed and photoSelectResult is:' + JSON.stringify(photoSelectResult));
            console.info('photoPicker .select to file succeed and uri is:' + this.uri);

            if (this.uri.length > 0) {
              let oneUri = this.uri[0]
              // let uri: string = ''; // 这里应该是你的URI
              let file = fileIo.openSync(oneUri, fileIo.OpenMode.READ_ONLY);
              console.info('file fd: ' + file.fd);

              let stat = await fileIo.stat(file.fd);

              // let buffer = new ArrayBuffer(4096);
              console.info('readSync data to file succeed and buffer size is: stat' + stat.size)
              let buffer = new ArrayBuffer(stat.size);
              let readLen = fileIo.readSync(file.fd, buffer);
              console.info('readSync data to file succeed and buffer size is:' + readLen);
              fileIo.closeSync(file);

              console.info('readSync data to file succeed and buffer size is: buffer 大小 ' + buffer.byteLength)


              // 创建一个Base64Helper实例
              let base64Helper = new util.Base64Helper();
              // 使用Base64Helper将二进制数据转换为Base64编码的字符串
              let base64Data = base64Helper.encodeToStringSync(new Uint8Array(buffer.slice(0, readLen)));

              // let base64Data = btoa(String.fromCharCode(...new Uint8Array(buffer.slice(0, readLen-1))));
              console.info('Base64 encoded data: ' + base64Data);

            }

            if (event) {
              event.result.handleFileList(this.uri);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke photoPicker .select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}

关键代码

            if (this.uri.length > 0) {
              let oneUri = this.uri[0]
              // let uri: string = ''; // 这里应该是你的URI
              let file = fileIo.openSync(oneUri, fileIo.OpenMode.READ_ONLY);
              console.info('file fd: ' + file.fd);

              let stat = await fileIo.stat(file.fd);

              // let buffer = new ArrayBuffer(4096);
              console.info('readSync data to file succeed and buffer size is: stat' + stat.size)
              let buffer = new ArrayBuffer(stat.size);
              let readLen = fileIo.readSync(file.fd, buffer);
              console.info('readSync data to file succeed and buffer size is:' + readLen);
              fileIo.closeSync(file);

              console.info('readSync data to file succeed and buffer size is: buffer 大小 ' + buffer.byteLength)

              // 创建一个Base64Helper实例
              let base64Helper = new util.Base64Helper();
              // 使用Base64Helper将二进制数据转换为Base64编码的字符串
              let base64Data = base64Helper.encodeToStringSync(new Uint8Array(buffer.slice(0, readLen)));

              // let base64Data = btoa(String.fromCharCode(...new Uint8Array(buffer.slice(0, readLen-1))));
              console.info('Base64 encoded data: ' + base64Data);

            }
 

html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="upload">
    <!--  点击上传按钮   -->
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" id="upload" name="upload"/>
    </form>
</div>
</body>
</html>
<style>
    body{
        width:100%;
        height:auto;
        margin:50px auto;
        text-align:center;
        background-color:#2EB3FF
    }
</style>