IBest-UI@HarmonyOS

Appearance

Uploader 文件上传 ​

介绍 ​

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传状态。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入 ​

ts
import { IBestUploader, IBestUploaderFile } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

可通过 selectType 属性设置要选的文件类型。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = []
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList
      })
    }
    .padding(20)
  }
}

上传状态 ​

上传状态

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = [
    new IBestUploaderFile({
      url: "https://img0.baidu.com/it/u=2229144304,3578627907&fm=253&fmt=auto&app=138&f=JPEG?w=467&h=300",
      isImage: true,
      status: "uploading"
    }),
    new IBestUploaderFile({
      url: "https://pic1.zhimg.com/80/v2-03cdb3bff2090e98885fe4951799a1f4_1440w.webp",
      status: "failed"
    })
  ]
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList
      })
    }
    .padding(20)
  }
}

限制上传数量 ​

限制上传数量

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = [
    new IBestUploaderFile({
      url: "https://pic1.zhimg.com/80/v2-03cdb3bff2090e98885fe4951799a1f4_1440w.webp"
    })
  ]
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList,
        max: 1
      })
    }
    .padding(20)
  }
}

自定义上传触发器 ​

自定义上传触发器

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = []
  @Builder customUploader(){
		Text("选择图片")
			.width(100)
			.height(50)
			.textAlign(TextAlign.Center)
			.backgroundColor("#3D8AF2")
			.fontColor(Color.White)
			.fontSize(14)
	}
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList,
        uploaderIcon: $r("app.media.icon_plus")
      })
      IBestUploader({
        fileList: $imgList,
        customUploader: (): void => this.customUploader()
      })
    }
    .padding(20)
  }
}

自定义预览样式 ​

自定义预览样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = [
		new IBestUploaderFile({
			url: "https://pic1.zhimg.com/80/v2-03cdb3bff2090e98885fe4951799a1f4_1440w.webp"
		})
	]
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList,
        previewSize: 120,
				cornerRadius: 8
      })
    }
    .padding(20)
  }
}

自定义预览内容 ​

自定义预览内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = [
		new IBestUploaderFile({
			url: "https://pic1.zhimg.com/80/v2-03cdb3bff2090e98885fe4951799a1f4_1440w.webp"
		})
	]
  @Builder previewItem(file: IBestUploaderFile){
		Column() {
			Image(file.url || file.previewUri)
				.width("100%")
			Text(file.name)
				.width("100%")
				.fontColor("#fff")
				.fontSize(14)
				.textAlign(TextAlign.Center)
				.maxLines(1)
				.textOverflow({ overflow: TextOverflow.Ellipsis })
				.position({ left: 0, bottom: 0 })
		}
		.width("100%")
		.height("100%")
		.justifyContent(FlexAlign.Center)
	}
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList,
        customPreview: (file: IBestUploaderFile): void => this.previewItem(file)
      })
    }
    .padding(20)
  }
}

禁用 ​

禁用

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State imgList: IBestUploaderFile[] = [
		new IBestUploaderFile({
			url: "https://pic1.zhimg.com/80/v2-03cdb3bff2090e98885fe4951799a1f4_1440w.webp"
		})
	]
  build() {
    Column(){
      IBestUploader({
        fileList: $imgList,
        disabled: true
      })
    }
    .padding(20)
  }
}

API ​

@Props ​

参数说明类型默认值
fileList文件列表，支持双向绑定IBestUploaderFile[][]
selectType选择文件类型，默认为图片'image' | 'file'image
max最大上传数量number-1
maxSize单个文件大小最大限制number-1
imageFit预览图片裁剪方式ImageFitCover
previewSize预览大小number | string80
isPreviewFullImage是否在点击预览图后展示全屏图片预览booleantrue
cornerRadius圆角大小number | string0
uploaderIcon自定义触发器图标ResourceStr照相机
uploaderIconSize触发器图标大小number | string24
uploaderIconColor触发器图标颜色ResourceColor#dcdee0
showDelete是否显示删除按钮booleantrue
fileSelectOptions文件选择配置项, 仅在selectType为file时有效FileSelectOptions-
disabled是否禁用booleanfalse
customUploader自定义上传触发器CustomBuilder-
customPreview自定义预览内容(file: IBestUploaderFile) => void-

FileSelectOptions 数据结构 ​

参数说明类型默认值
defaultFilePathUri指定选择的文件或者目录路径string''
fileSuffixFilters选择文件的后缀类型, 详情参考这里string[][]

IBestUploaderFile 数据结构 ​

参数说明类型默认值
url文件在线地址string''
internalUriinternal协议地址, 格式为 internal://cache/ 加文件名string[]
previewUri选择文件后可预览地址(仅图片)string''
cacheUri选择文件后在缓存目录中的地址string''
name文件名string''
size文件大小, 单位Bytenumber0
isImage是否是图片, 当在线图片地址不包含类型信息时, 可以添加 isImage 标记来声明string''
status文件上传状态'uploading' | 'failed' | 'done'''

Events ​

事件名说明参数类型
onBeforeInsert文件插入前回调, 返回true插入, 返回false则跳过(file: IBestUploaderFile) => boolean
onChange文件全部插入后回调insertFile: IBestUploaderFile[], allFile: IBestUploaderFile[]
onExceed超出限制后回调-