Upload 上传

提供单图上传、多图上传和文件上传三个组件。在线演示

SingleImageUpload 单图上传

<template>
  <SingleImageUpload v-model="imageUrl" />
</template>

<script setup lang="ts">
const imageUrl = ref("https://example.com/image.jpg");
</script>

限制格式和大小：

<SingleImageUpload v-model="imageUrl" accept=".png,.jpg,.jpeg" :max-file-size="5" />

自定义尺寸：

<SingleImageUpload v-model="imageUrl" :style="{ width: '200px', height: '200px' }" />

Props

参数	说明	类型	默认值
modelValue	图片 URL（v-model）	string	''
accept	接受的图片格式	string	'image/*'
maxFileSize	最大文件大小（MB）	number	10
name	上传文件的参数名	string	'file'
data	上传时附带的额外参数	object	{}
style	自定义样式	object	{ width: '150px', height: '150px' }

MultiImageUpload 多图上传

<template>
  <MultiImageUpload v-model="imageUrls" />
</template>

<script setup lang="ts">
const imageUrls = ref<string[]>([
  "https://example.com/image1.jpg",
  "https://example.com/image2.jpg",
]);
</script>

限制数量和格式：

<MultiImageUpload v-model="imageUrls" :limit="5" accept=".png,.jpg,.jpeg,.gif" :max-file-size="10" />

Props

参数	说明	类型	默认值
modelValue	图片 URL 数组（v-model）	string[]	[]
limit	最大上传数量	number	10
accept	接受的图片格式	string	'image/*'
maxFileSize	单个文件最大大小（MB）	number	10
name	上传文件的参数名	string	'file'
data	上传时附带的额外参数	object	{}

FileUpload 文件上传

<template>
  <FileUpload v-model="fileList" />
</template>

<script setup lang="ts">
interface FileInfo {
  name: string;
  url: string;
}

const fileList = ref<FileInfo[]>([]);
</script>

限制类型和大小：

<FileUpload v-model="fileList" :limit="5" accept=".pdf,.doc,.docx" :max-file-size="20" upload-btn-text="选择文件" />

Props

参数	说明	类型	默认值
modelValue	文件列表（v-model）	FileInfo[]	[]
limit	最大上传数量	number	10
accept	接受的文件类型	string	'*'
maxFileSize	单个文件最大大小（MB）	number	10
uploadBtnText	上传按钮文本	string	'上传文件'
name	上传文件的参数名	string	'file'
data	上传时附带的额外参数	object	{}
style	自定义样式	object	{ width: '300px' }

FileInfo 类型

interface FileInfo {
  name: string; // 文件名
  url: string;  // 文件地址
}

表单中使用

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="头像">
      <SingleImageUpload v-model="form.avatar" />
    </el-form-item>
    <el-form-item label="商品图片">
      <MultiImageUpload v-model="form.images" :limit="5" />
    </el-form-item>
    <el-form-item label="附件">
      <FileUpload v-model="form.files" :limit="3" accept=".pdf,.doc,.docx" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
interface FormData {
  avatar: string;
  images: string[];
  files: FileInfo[];
}

const form = reactive<FormData>({
  avatar: "",
  images: [],
  files: [],
});
</script>

常见 accept 值

// 所有图片
accept = "image/*";
// 指定图片格式
accept = ".jpg,.jpeg,.png,.gif,.bmp,.webp";
// Word 文档
accept = ".doc,.docx";
// Excel 表格
accept = ".xls,.xlsx";
// PDF 文档
accept = ".pdf";
// 所有文件
accept = "*";

v-model 类型

SingleImageUpload 绑定字符串，MultiImageUpload 绑定字符串数组，FileUpload 绑定 FileInfo[] 对象数组。

组件默认调用 FileAPI.upload() 接口，需确保后端接口已配置。