element plus: el-upload详解

时间：2025-01-19 11:00:33
<el-upload
	ref="uploadRef"
	:limit="1" // 上传几个
	accept=".xlsx, .xls"  // 支持的格式
	:headers="headers" 
	:action="http//:"
	:disabled="false" // 是否禁用
    :before-upload="onBeforeUploadFun"
	:on-progress="handleFileUploadProgress"
	:on-success="handleFileSuccess"
	:on-error="handleFileError"
	:auto-upload="true"
    :data="postData"
	drag  // 支持拖拽
	multiple  // 支持一次上传多个文件
    >
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">
		将文件拖拽到此处，或
		<em>点击上传</em>
	</div>
	<template #tip>
		<div class="el-upload__tip text-center">
			jpg/png files with a size less than 500kb
		</div>
	</template>
</el-upload>
首先这里要先注意一个属性 auto-upload
auto-upload = true 时，

打开自动上传 action起作用
data=“{user: ‘li’}” 传参
before-upload
上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传
也就是这里可以 获取到file文件
on-success： active中接口成功返回事件
on-error： active中接口失败返回事件
on-progress： 文件上传时的钩子，这里可以在上传时禁用上传功能，成功后打开，起个优化的作用

const onBeforeUploadFun = (file: any) => {
  // 以 m（兆）为单位，判断文件大小，超出范围提示用户，false就会停止上传
  retrun imgSize =  / 1024 / 1024 < 20;
};
auto-upload = false 时

关闭自动上传 action不起作用，
on-change 事件中获取 file文件流

const onChangeFun = (rawFile: any) => {
  const formData = new FormData();
  ("user", "li");
  ("num", 222);
  ("file", );
}

header

const headers = () => {
	return {
		Authorization: 'Bearer ' + "533eb984",
		'TENANT-ID': 12
	};
};

清空当前 upload的内容

const uploadRef = ref();
();
这种写法是vue3.0的写法

相关文章