Upload

Brief Introduction

The Upload component is used for file upload functionality, supporting both regular file upload and avatar upload modes. mengyue-components has encapsulated it and performed vitest testing. You can use <MYUpload></MYUpload> or <MYUpload /> to implement file upload functionality.

Basic Usage

Basic File Upload

Basic file upload functionality supporting single or multiple file selection.

Code Demo

<template>
  <MYUpload 
    action='/api/upload'
    :show-file-list='true'
    @success='handleSuccess'
    @error='handleError'
    @progress='handleProgress'
  >
    <template #icon>📁</template>
    Click to upload file
  </MYUpload>
</template>
<script setup>
const handleSuccess = (res, file) => {
  console.log('Upload successful:', file.name, res)
}
const handleError = (err, file) => {
  console.error('Upload failed:', file.name, err)
}
const handleProgress = (percent, file) => {
  console.log('Upload progress:', file.name, percent + '%')
}
</script>

展开代码

Avatar Upload

Use the avatar prop to enable avatar upload mode.

Code Demo

👤 Click to upload avatar

Current avatar: Not set

<template>
  <MYUpload 
    action='/api/upload'
    :avatar='true'
    :src='avatarUrl'
    @success='handleAvatarSuccess'
  >
    <template #icon>👤</template>
    Click to upload avatar
  </MYUpload>
</template>
<script setup>
import { ref } from 'vue'
const avatarUrl = ref('')
const handleAvatarSuccess = (res, file) => {
  console.log('Avatar upload successful:', file.name)
  // Update avatar URL here
  avatarUrl.value = URL.createObjectURL(file)
}
</script>

展开代码

File Type Restriction

Use the accept prop to restrict the file types that can be uploaded.

Code Demo

Image Upload (jpg, png only):

Document Upload (pdf, doc only):

<template>
  <div style='display: flex; flex-direction: column; gap: 15px;'>
    <div>
      <label>Image Upload (jpg, png only):</label>
      <MYUpload 
        action='/api/upload'
        accept='.jpg,.jpeg,.png'
        @success='handleSuccess'
      >
        <template #icon>🖼️</template>
        Upload Image
      </MYUpload>
    </div>
    <div>
      <label>Document Upload (pdf, doc only):</label>
      <MYUpload 
        action='/api/upload'
        accept='.pdf,.doc,.docx'
        @success='handleSuccess'
      >
        <template #icon>📄</template>
        Upload Document
      </MYUpload>
    </div>
  </div>
</template>
<script setup>
const handleSuccess = (res, file) => {
  console.log('Upload successful:', file.name)
}
</script>

展开代码

Custom Request Headers

Use the headers prop to set custom headers for the upload request.

Code Demo

<template>
  <MYUpload 
    action='/api/upload'
    :headers='headers'
    @success='handleSuccess'
  >
    <template #icon>🔐</template>
    Upload with Authentication
  </MYUpload>
</template>
<script setup>
import { ref } from 'vue'
const headers = ref({
  'Authorization': 'Bearer your-token-here',
  'X-Custom-Header': 'custom-value'
})
const handleSuccess = (res, file) => {
  console.log('Authenticated upload successful:', file.name)
}
</script>

展开代码

Hide File List

Use the show-file-list prop to control whether the file list is displayed.

Code Demo

Show File List:

Hide File List:

<template>
  <div style='display: flex; flex-direction: column; gap: 15px;'>
    <div>
      <label>Show File List:</label>
      <MYUpload 
        action='/api/upload'
        :show-file-list='true'
        @success='handleSuccess'
      />
    </div>
    <div>
      <label>Hide File List:</label>
      <MYUpload 
        action='/api/upload'
        :show-file-list='false'
        @success='handleSuccess'
      />
    </div>
  </div>
</template>
<script setup>
const handleSuccess = (res, file) => {
  console.log('Upload successful:', file.name)
}
</script>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
action	Upload URL	string	—	Required
headers	Request headers for upload	object	—	{}
accept	Accepted file types	string	—	''
multiple	Whether to support multiple file selection	boolean	—	false
avatar	Whether in avatar upload mode	boolean	—	false
src	Avatar URL	string	—	''
show-file-list	Whether to show uploaded file list	boolean	—	true
onSuccess	Callback function on successful upload	function	—	undefined
onError	Callback function on failed upload	function	—	undefined
onProgress	Callback function on upload progress	function	—	undefined

Events

Event Name	Description	Parameters
success	Triggered when file upload is successful	res: any, file: File
error	Triggered when file upload fails	err: any, file: File
progress	Triggered on upload progress change	percent: number, file: File

Slots

Slot Name	Description
default	Text content of the upload button
icon	Icon of the upload button

Type Definitions

interface UploadProps {
  action: string;
  headers?: Record<string, string>;
  accept?: string;
  multiple?: boolean;
  avatar?: boolean;
  src?: string;
  showFileList?: boolean;
  onSuccess?: (res: any, file: File) => void;
  onError?: (err: any, file: File) => void;
  onProgress?: (percent: number, file: File) => void;
}