Nhảy tới nội dung

uploader

uploader là component thuộc tini-ui hỗ trợ chọn và xem trước tập tin (Hiện tại chỉ hỗ trợ tập tin là hình ảnh).

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính uploader

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classNamestringCustom class
stylestringInline style
valuestringGiá trị khởi tạo
iconstringType của icon, xem thêm tại đây
iconSize40Size của icon
disabledbooleanfalseDisable uploader
showPreviewbooleantrueCho phép bấm vào hình ảnh để show preview uploader
sourceTypearray['camera, 'album']Chụp hình bằng camera hay lấy hình từ album. Mặc định là cả hai
onChangeeventSự kiện sẽ được gọi khi chọn hoặc xoá hình ảnh`

Thuộc tính hình ảnh

Thuộc tínhKiểu dữ liệuMô tả
pathstringĐường đẫn tạm thời của ảnh
sizenumberDung lượng của ảnh. Đơn vị tính: byte
widthnumberChiều rộng của ảnh. Đơn vị tính: pixel
heightnumberChiều cao của ảnh. Đơn vị tính pixel

Sample Code

index.json
{
"defaultTitle": "Uploader",
"usingComponents": {
"uploader": "@tiki.vn/tini-ui/es/uploader/index"
}
}
index.txml
<uploader/>
<uploader icon="plus"/>
<uploader style="width: 80px; height: 80px;" iconSize="40"/>
<uploader>
<view class="flex items-center px-2x-small">
<icon type="info" class="mr-2x-small"/>
<text>Select image</text>
</view>
</uploader>
<uploader disabled/>
<uploader value="https://i.picsum.photos/id/77/500/500.jpg?hmac=tSoa4RHbrWHe6CfA-uOJZpiHj-3e9OoYJ91vBlFaMD8"/>
<uploader onChange="onChange"/>
index.js
Page({
onChange(images) {
my.alert({
title: 'Uploader was changed',
content: JSON.stringify(images)
});
}
});