Uploader file upload
introduce
Used to upload local images or files to the server, and display preview images and upload progress during the upload process. Currently, the Uploader component does not include the interface logic for uploading files to the server. This step needs to be implemented by yourself.
This component can upload pictures, videos, and audios. APIs for image and video upload based on uniapp.
Code Demo
Basic usage
After the file is uploaded, the after-read
callback function will be triggered to obtain the corresponding callback information.
<z-uploader :after-read="afterRead" />
const afterRead = (file) => {
// At this point you can upload the file to the server yourself
console.log(file);
};
File preview
Through v-model
, you can bind the uploaded file list and display a preview of the file list.
<z-uploader v-model="fileList" multiple />
import { ref } from 'vue';
const fileList = ref([
{ url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg' },
{ url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg' }
])
Upload status
The upload status can be identified through the status
attribute. uploading
means uploading, failed
means the upload failed, and done
means the upload is completed.
<z-uploader v-model="fileListStatus" :after-read="afterReadStatus" />
const fileListStatus = ref([
{
url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
status: 'uploading',
message: 'Uploading...'
},
{
url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
status: 'failed',
message: 'Upload failed'
}
])
const afterReadStatus = (file: any) => {
file.status = 'uploading'
file.message = 'Uploading...'
setTimeout(() => {
file.status = 'failed'
file.message = 'Upload failed'
}, 1000)
}
Limit the number of uploads
The number of uploaded files can be limited through the max-count
attribute. When the number of uploaded files reaches the limit, the upload area will be automatically hidden.
<z-uploader v-model="fileListMax" multiple :max-count="2" />
const fileListMax = ref([])
Limit upload size
You can limit the size of uploaded files through the max-size
attribute. Files that exceed the size will be automatically filtered. This file information can be obtained through the oversize
event.
<z-uploader
v-model="fileListSize"
multiple
:max-size="500 * 1024"
@oversize="onOversize"
/>
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onOversize = () => {
toast.showToast('File size cannot exceed 500kb')
}
Custom upload style
The default slot allows you to customize the style of the upload area.
<z-uploader>
<z-button icon="upload" type="primary">Upload files</z-button>
</z-uploader>
Custom preview style
The content covered above the preview area can be customized through the preview-cover
slot.
<z-uploader v-model="fileList">
<template #preview-cover="{ file }">
<view class="preview-cover z-ellipsis">{{
file?.url ? file?.url : file.file?.url
}}</view>
</template>
</z-uploader>
<style>
.demo-uploader {
.preview-cover {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 8rpx;
font-size: 24rpx;
color: #fff;
text-align: center;
background: rgb(0 0 0 / 70%);
}
}
</style>
Custom preview size
Define the size of the preview image and upload area through the preview-size
attribute.
<z-uploader v-model="fileList" preview-size="180rpx" />
Set preview-size
to array format, and you can set the width and height separately. The first item in the array corresponds to the width, and the second item in the array corresponds to the height.
<z-uploader v-model="fileList" :preview-size="[60, 40]" />
Upload pre-processing
By passing in the beforeRead
function, you can perform verification and processing before uploading. Returning true
means that the verification has passed, and returning false
means that the verification has failed. Supports returning Promise
for custom processing of file objects, such as compressing images.
<z-uploader :before-read="beforeRead" />
<z-uploader :before-read="asyncBeforeRead" />
const beforeRead = (file: any) => {
if (file.type == 'image') {
toast.showToast('Upload image interception')
return false
}
return true
}
const asyncBeforeRead = (file: any) =>
new Promise((resolve, reject) => {
if (file.type !== 'image') {
toast.showToast('Please upload image format file')
reject()
} else {
file.custom = {
name: 'zebra-image-test'
}
resolve(file)
}
})
Customize single image preview
Set a single preview image property in the v-model
array, supporting imageFit
deletable
previewSize
beforeDelete
.
<z-uploader v-model="fileList" :deletable="false" />
const fileListOnly = ref([
{
url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
deletable: true,
beforeDelete: () => {
toast.showToast('Delete preprocessing')
}
},
{
url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg'
}
])
Enable overlay upload
<z-uploader v-model="fileListRe" reupload max-count="2" />
const fileListRe = ref([
{ url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg' },
{ url: 'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg' }
])
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | Uploaded file list | FileListItem | - |
accept | File types allowed to be uploaded | string | image |
name | Identifier, usually a unique string or number, can be obtained in the second parameter of the callback function | number | string | - |
preview-size | The size of the preview image and upload area, the default unit is px | number | string | Array | 160rpx |
preview-image | Whether to display the preview image after uploading | boolean | true |
preview-full-image | Whether to display a full-screen image preview after clicking the preview image | boolean | true |
multiple | Whether to enable image multiple selection | boolean | false |
disabled | Whether to disable file upload | boolean | false |
readonly | Whether to set the upload area to read-only status | boolean | false |
deletable | Whether to display the delete button | boolean | true |
reupload | Whether to enable overlay upload, which will turn off image preview | boolean | false |
show-upload | Whether to display the upload area | boolean | true |
capture | Image selection mode | string | - |
after-read | Callback function after file reading is completed | Function | - |
before-read | Callback function before file reading, return false to terminate file reading, supports returning Promise | Function | - |
before-delete | Callback function before file deletion, return false to terminate file reading, supports returning Promise | Function | - |
max-size | File size limit in byte | number | string | (file: File) => boolean | Infinity |
max-count | File upload limit | number | string | Infinity |
upload-text | Upload area text prompt | string | - |
upload-icon | Upload area icon name or image link, equivalent to the name attribute of the Icon component | string | upload |
Note: The upload component is based on the upload-related API of uniapp.
Events
Event name | Description | Callback parameters |
---|---|---|
oversize | Triggered when the file size exceeds the limit | Same as after-read |
click-upload | Triggered when the upload area is clicked | event: MouseEvent |
click-preview | Triggered when the preview image is clicked | Same as after-read |
click-reupload | Triggered when clicking to overwrite upload | Same as after-read |
delete | Triggered when deleting file preview | Same as after-read |
Slots
Name | Description | Parameters |
---|---|---|
default | Custom upload area | - |
preview-delete | Custom delete button | - |
preview-cover | Customize the content covered above the preview area | item: FileListItem |
Callback parameters
When before-read, after-read, and before-delete are executed, the following callback parameters are passed:
Parameter name | Description | Type |
---|---|---|
file | Callback information after selecting a file | object |
detail | Additional information, including name and index fields | object |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-uploader-size | 160rpx | - |
--z-uploader-icon-size | 48rpx | - |
--z-uploader-icon-color | var(--z-gray-4) | - |
--z-uploader-text-color | var(--z-text-color-2) | - |
--z-uploader-text-font-size | var(--z-font-size-sm) | - |
--z-uploader-upload-background | var(--z-gray-1) | - |
--z-uploader-upload-active-color | var(--z-active-color) | - |
--z-uploader-delete-color | var(--z-white) | - |
--z-uploader-delete-icon-size | 28rpx | - |
--z-uploader-delete-background | rgba(0, 0, 0, 0.7) | - |
--z-uploader-file-background | var(--z-background) | - |
--z-uploader-file-icon-size | 40rpx | - |
--z-uploader-file-icon-color | var(--z-gray-7) | - |
--z-uploader-file-name-padding | 0 var(--z-padding-base) | - |
--z-uploader-file-name-margin-top | var(--z-padding-xs) | - |
--z-uploader-file-name-font-size | var(--z-font-size-sm) | - |
--z-uploader-file-name-text-color | var(--z-gray-7) | - |
--z-uploader-mask-text-color | var(--z-white) | - |
--z-uploader-mask-background | fade(var(--z-gray-8), 88%) | - |
--z-uploader-mask-icon-size | 44rpx | - |
--z-uploader-mask-message-font-size | var(--z-font-size-sm) | - |
--z-uploader-mask-message-line-height | var(--z-line-height-xs) | - |
--z-uploader-loading-icon-size | 44rpx | - |
--z-uploader-loading-icon-color | var(--z-white) | - |
--z-uploader-disabled-opacity | var(--z-disabled-opacity) | - |
--z-uploader-border-radius | 0px | - |