element plus: el-upload详解

<el-upload
	ref="uploadRef"
	:limit="1" // 上传几个
	accept=".xlsx, .xls"  // 支持的格式
	:headers="headers" 
	:action="http//:shangchuan.com"
	:disabled="state.upload.isUploading"
    :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 事件中获取 file文件流

const onBeforeUploadFun = (file: any) => {
  console.log(file);
  formData = new FormData();
  formData.append("file", file);
};

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

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

header

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

清空当前 upload的内容

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