Upload

文件上传组件

Usage

<template>
  <div class="p-10">
    <BasicDragVerify @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { BasicDragVerify, PassingData } from "/@/components/Verify/index";
import { useMessage } from "/@/hooks/web/useMessage";

export default defineComponent({
  components: { BasicDragVerify },
  setup() {
    const { createMessage } = useMessage();
    function handleSuccess(data: PassingData) {
      const { time } = data;
      createMessage.success(`校验成功,耗时${time}秒`);
    }
    return {
      handleSuccess,
    };
  },
});
</script>

Config

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

# .env.development

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

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

# .env.production
VITE_GLOB_UPLOAD_URL=/upload

Props

属性	类型	默认值	可选值	说明
value	string[]	-	-	已上传的文件列表，支持 v-model
showPreviewNumber	boolean	true	-	是否显示预览数量
emptyHidePreview	boolean	false	-	没有上传文件时是否隐藏预览
helpText	string	-	-	帮助文本
maxSize	number	2	-	单个文件最大体积，单位 M
maxNumber	number	Infinity	-	最大上传数量，Infinity 则不限制
accept	string[]	-	-	限制上传格式，可使用文件后缀名(点号可选)或 MIME 字符串。例如 ['.doc,','docx','application/msword','image/*']
multiple	boolean	-	-	开启多文件上传
uploadParams	any	-	-	上传携带的参数
api	Fn	-	-	上传接口，为上面配置的接口

Events

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