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.

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

Props

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

Events

Slots

Callback parameters

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

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.