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

前言

简介

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

安装

ohpm install @peakmain/library
导入依赖
import { ImageUploader, ImageBean, UploadImage } from '@peakmain/library/Index';

参数

ImageUploader组件

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

UploadImage 上传图片

图片上传结果.jpg

参数名参数名名称
beanImageBean[]上传图片的集合
urlstring上传图片的url
tokenstring上传接口的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%")
  }
}
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/20597,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?