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)
     }
   })

Disable file upload

Disable file upload via the disabled attribute.

<z-uploader disabled />

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

ParametersDescriptionTypeDefault value
v-modelUploaded file listFileListItem-
acceptFile types allowed to be uploadedstringimage
nameIdentifier, usually a unique string or number, can be obtained in the second parameter of the callback functionnumber | string-
preview-sizeThe size of the preview image and upload area, the default unit is pxnumber | string | Array160rpx
preview-imageWhether to display the preview image after uploadingbooleantrue
preview-full-imageWhether to display a full-screen image preview after clicking the preview imagebooleantrue
multipleWhether to enable image multiple selectionbooleanfalse
disabledWhether to disable file uploadbooleanfalse
readonlyWhether to set the upload area to read-only statusbooleanfalse
deletableWhether to display the delete buttonbooleantrue
reuploadWhether to enable overlay upload, which will turn off image previewbooleanfalse
show-uploadWhether to display the upload areabooleantrue
captureImage selection modestring-
after-readCallback function after file reading is completedFunction-
before-readCallback function before file reading, return false to terminate file reading,
supports returning Promise
Function-
before-deleteCallback function before file deletion, return false to terminate file reading,
supports returning Promise
Function-
max-sizeFile size limit in bytenumber | string | (file: File) => booleanInfinity
max-countFile upload limitnumber | stringInfinity
upload-textUpload area text promptstring-
upload-iconUpload area icon name or image link, equivalent to the name attribute of the Icon componentstringupload

Note: The upload component is based on the upload-related API of uniapp.

Events

Event nameDescriptionCallback parameters
oversizeTriggered when the file size exceeds the limitSame as after-read
click-uploadTriggered when the upload area is clickedevent: MouseEvent
click-previewTriggered when the preview image is clickedSame as after-read
click-reuploadTriggered when clicking to overwrite uploadSame as after-read
deleteTriggered when deleting file previewSame as after-read

Slots

NameDescriptionParameters
defaultCustom upload area-
preview-deleteCustom delete button-
preview-coverCustomize the content covered above the preview areaitem: FileListItem

Callback parameters

When before-read, after-read, and before-delete are executed, the following callback parameters are passed:

Parameter nameDescriptionType
fileCallback information after selecting a fileobject
detailAdditional information, including name and index fieldsobject

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.

NameDefaultDescription
--z-uploader-size160rpx-
--z-uploader-icon-size48rpx-
--z-uploader-icon-colorvar(--z-gray-4)-
--z-uploader-text-colorvar(--z-text-color-2)-
--z-uploader-text-font-sizevar(--z-font-size-sm)-
--z-uploader-upload-backgroundvar(--z-gray-1)-
--z-uploader-upload-active-colorvar(--z-active-color)-
--z-uploader-delete-colorvar(--z-white)-
--z-uploader-delete-icon-size28rpx-
--z-uploader-delete-backgroundrgba(0, 0, 0, 0.7)-
--z-uploader-file-backgroundvar(--z-background)-
--z-uploader-file-icon-size40rpx-
--z-uploader-file-icon-colorvar(--z-gray-7)-
--z-uploader-file-name-padding0 var(--z-padding-base)-
--z-uploader-file-name-margin-topvar(--z-padding-xs)-
--z-uploader-file-name-font-sizevar(--z-font-size-sm)-
--z-uploader-file-name-text-colorvar(--z-gray-7)-
--z-uploader-mask-text-colorvar(--z-white)-
--z-uploader-mask-backgroundfade(var(--z-gray-8), 88%)-
--z-uploader-mask-icon-size44rpx-
--z-uploader-mask-message-font-sizevar(--z-font-size-sm)-
--z-uploader-mask-message-line-heightvar(--z-line-height-xs)-
--z-uploader-loading-icon-size44rpx-
--z-uploader-loading-icon-colorvar(--z-white)-
--z-uploader-disabled-opacityvar(--z-disabled-opacity)-
--z-uploader-border-radius0px-