HarmonyOS基本UI封装——ImageLoader 图片上传(五)

前言

• BasicLibrary是一个基于API 11封装的基本库

• 未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前正在完善UI组件，大家如果组件有什么需求，可以尽管提哦

• BasicLibrary项目地址

• BasicLibrary的openHarmony三方库中心仓

文章系列

• HarmonyOS基本工具封装——BasicLibrary的基本使用(一)
• HarmonyOS基本UI封装——标题栏组件NavBar封装与使用(二)
• HarmonyOS基本UI封装——Cell单元格组件封装与使用(三)
• HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多（四）

简介

鸿蒙基本库封装，提升鸿蒙开发效率

安装

ohpm install @peakmain/library

导入依赖

import { ImageUploader, ImageBean, UploadImage } from '@peakmain/library/Index';

参数

ImageUploader组件

参数名	参数名	名称
title	string	设置组中标题文本,默认值为 "",则不会显示标题栏
maxSelectNumber	number	最大可选图片数量,默认值为3
canUpload	boolean	是否可以选择图片上传,默认值为true，表示可以选择图片
imgBean	ImageBean[]	已选择图片的集合
onSelectImageChange	(list: ImageBean[])	选择图片之后的回调，默认为空实现
areaHeight	number	设置状态栏的高度，主要用于解决图片预览时沉浸式问题

UploadImage 上传图片

参数名	参数名	名称
bean	ImageBean[]	上传图片的集合
url	string	上传图片的url
token	string	上传接口的token，默认值为 ""

async
submit()
{
  const result = await UploadImage(this.imgBean, this.url, this.token)
  let tmp: string[] = []
  tmp = result.map(url => {
    return url.url
  })
  AlertDialog.show({
    message: `上传图片后的结果:${tmp}`
  })
}

示例

import { NavBar, ImageUploader, ImageBean, UploadImage } from '@peakmain/library/Index';
import { AREA_HEIGHT } from '../../constants/StorageConstants';

@Entry
@Component
struct PkLoaderPage {
  @State
  imgBean: ImageBean[] = []
  token: string = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiI0MDUxNjEzMDI0ODM3NDU4MDIxIiwiYWNjb3VudCI6InRyZWFzdXJlIiwibmFtZSI6IuWPuOacuiIsIm9yZ2lkIjoxMDI0OTkwNzI2NTE5NDAzNDU3LCJzdGF0aW9uaWQiOjEwMjQ3MDc1MzU4OTE5NDQ3NjksImFkbWluaXN0cmF0b3IiOmZhbHNlLCJleHAiOjE3MTY5OTIxNjR9.hQzHgAHGNYjxJ-G4nY68DFy8PUfx4nF2VFo9R_dMKSswPEkoI77uKqop9clSPr7bSdT5B4e0yHStjH-vHRTeVw"
  @StorageProp(AREA_HEIGHT)
  areaHeight: number = 0

  async submit() {
    const result = await UploadImage(this.imgBean, "", this.token)
    let tmp: string[] = []
    tmp = result.map(url => {
      return url.url
    })
    AlertDialog.show({
      message: `上传图片后的结果:${tmp}`
    })
  }

  build() {
    Column() {
      NavBar({
        title: "ImageLoader图片上传"
      })
      ImageUploader({
        title: '文件预览',
        canUpload: true,
        imgBean: this.imgBean,
        maxSelectNumber:3,
        onSelectImageChange: (bean: ImageBean[]) => {
          this.imgBean = bean
        },
        areaHeight: this.areaHeight
      })
        .layoutWeight(1)

      Button("提交", { type: ButtonType.Capsule })
        .backgroundColor($r('app.color.color_E56A54'))
        .fontColor(Color.White)
        .fontSize(16)
        .height(50)
        .width(125)
        .onClick(() => {
          this.submit()
        })

    }.height("100%")
  }
}