你正在查看的是 2.0 版本文档,当前最新版本为 v5.0,预览地址为 预览地址。 如果你想要查看新版本文档,请点击 V5 文档 查看最新文档。

Upload

文件上传组件

Usage

<template>
  <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicUpload } from '/@/components/Upload';
  import { uploadApi } from '/@/api/sys/upload';

  export default defineComponent({
    components: { BasicUpload },
    setup() {
      return {
        uploadApi,
        handleChange: (list: string[]) => {
          createMessage.info(`已上传文件${JSON.stringify(list)}`);
        },
      };
    },
  });
</script>

Config

.env.development.env.production 配置开发和生产的文件上传地址

# .env.development

VITE_PROXY=[["/upload","http://localhost:3001/upload"]]

::: tip
v3.0.0开始,作者重构了vite.config.ts,新版本不再支持VITE_PROXY环境变量。
:::

# 如果没有跨域问题,则直接使用真实上传地址
VITE_GLOB_UPLOAD_URL=/upload

# .env.production
VITE_GLOB_UPLOAD_URL=/upload

Props

属性类型默认值可选值说明
valuestring[]--已上传的文件列表,支持v-model
showPreviewNumberbooleantrue-是否显示预览数量
emptyHidePreviewbooleanfalse-没有上传文件时是否隐藏预览
helpTextstring--帮助文本
maxSizenumber2-单个文件最大体积,单位 M
maxNumbernumberInfinity-最大上传数量,Infinity 则不限制
acceptstring[]--限制上传格式,可使用文件后缀名(点号可选)或MIME字符串。例如 ['.doc,','docx','application/msword','image/*']
multipleboolean--开启多文件上传
uploadParamsany--上传携带的参数
apiFn--上传接口,为上面配置的接口
resultFieldstring-接口返回的字段,如果接口返回数组,可以不填。支持x.x.x格式
previewColumnsany--预览的表单列信息 BasicColumn[]
beforePreviewData(fileList)=>any[]--对预览的返回值进行处理

Events

事件回调参数返回值说明版本
change(fileList)=>void文件列表内容改变触发事件
delete(record)=>void在上传列表中删除文件的事件
preview-delete(url:string)=>void在预览列表中删除文件的事件2.5.3