鸿蒙图片上传功能

一.获取相册图片

最大长度为3   用户选择的时候需要处理当前显示的img数组

// 选择相册图片
  async doPickPhoto() {
    let PhotoSelectOptions = new picker.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 3;
    let photoPicker = new picker.PhotoViewPicker();
    let res = await photoPicker.select(PhotoSelectOptions)
    // 获取当前相册和用户选取的相册长度，最多只能上传3张
    const length = this.photoList.length+res.photoUris.length
    // 多出来的话进行前删，多几个删几个
    if(length>3){
      this.photoList.splice(0, length - 3);
    }
    //不直接进行赋值是因为会清空之前的
    res.photoUris.forEach((item:string)=>{
      this.photoList.push(item)
    })
  }

二.转为base64因为后端接口需要是base64格式，不需要的话可以直接使用photoList

base64Transition=()=>{
    this.submitImgList=[]
    this.photoList.forEach((item:string)=>{
        const file = fs.openSync(item)
        // 2.3 同步获取文件的详细信息
        const stat = fs.statSync(file.fd)
      // 2.4 创建缓冲区存储读取的文件流
        const buffer = new ArrayBuffer(stat.size)
        const num = fs.readSync(file.fd, buffer)
      // 2.5 开始同步读取文件流到缓冲区
        fs.readSync(file.fd, buffer)
      // 3. 转成base64编码的字符串
        const helper = new util.Base64Helper()
        const imgList= helper.encodeToStringSync(new Uint8Array(buffer))
        this.submitImgList.push({'image':imgList})
    })
  }

三.页面布局及使用

因为最大限制为3张，所以等于大于3的话会隐藏上传按钮，还有删除功能

  Row(){
            Text('上传图片').textLeftStyle().margin({right:10})
            ForEach(this.photoList,(item:string,index:number)=>{
              Stack({ alignContent: Alignment.TopEnd }) {
                // 图片
                Image(item)
                  .width(70).height(70).margin(10)
                Image($r('app.media.ic_btn_delete')).width(30).height(30)
                  .onClick(() => {
                    // 删除
                    this.photoList.splice(index, 1)
                  })
              }
            })
            // 添加
            Image($r("app.media.add")).onClick(async ()=>{
             await this.doPickPhoto()
            }).visibility(this.photoList.length>=3 ?Visibility.None:Visibility.Visible)
              .width(70).height(70)
          }.width('100%').padding(5)