FileUpload

EasyFileUpload is a file upload component based on Element Plus Upload component. It simplifies the upload logic, checks file types and sizes, and automatically extracts file links from backend responses.

Online Demo

请上传 大小不超过 2MB 格式为 png/jpg/jpeg/pdf 的文件

绑定值:

<template>
  <div class="demo-upload">
    <easy-file-upload
      v-model="fileList"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :limit="3"
      :file-size="2"
      :file-type="['png', 'jpg', 'jpeg', 'pdf']"
    />
    <div style="margin-top: 20px">绑定值: {{ fileList }}</div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { EasyFileUpload } from "easy-elplus"

const fileList = ref("")
</script>

<style scoped>
.demo-upload {
  width: 100%;
}
</style>

API

Attributes

Attribute	Description	Type	Default
v-model	Binding value, supports comma-separated string, object, or array	String / Object / Array	—
action	Upload URL (Required)	String	—
limit	Max upload count	Number	5
file-size	File size limit (MB)	Number	5
file-type	Allowed file extensions	Array	["doc", "xls", "ppt", "txt", "pdf"]
is-show-tip	Whether to show upload tip	Boolean	true
headers	Request headers for upload	Object	{}
base-url	Base URL. Attempts to remove this prefix when saving after successful upload; concatenates this prefix when displaying if not an absolute path	String	""
check-success	Custom success check function, accepts response object as parameter	Function	res => res.code === 200 || res.success === true
response-path	Path to file URL in response, supports deep nesting (e.g. data.url)	String	"data"
error-field	Path to error message in response	String	"msg"

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered when binding value changes	(value: string)

Features

1. Auto Extract URL: No need to handle on-success manually, just configure via response-path.
2. Multiple File Support: Built-in multiple file upload support, controlled via limit.
3. Format Validation: Automatic extension matching based on file-type.
4. Path Handling: Conveniently handle image server prefix via base-url.