element plus + el-upload 多文件上传

最新推荐文章于 2024-05-30 22:25:38 发布

天外天-亮

最新推荐文章于 2024-05-30 22:25:38 发布

阅读量669

点赞数 10

分类专栏： element 文章标签： javascript element-plus

本文链接：https://blog.csdn.net/weixin_44384273/article/details/135518919

版权

element 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<template>
	<el-upload
        class="avatar-uploader-excel"
		ref="uploadRef"
		:limit="limitFile"
		accept=".xlsx, .xls"
		action="#"
        :file-list="fileList"
		:disabled="state.upload.isUploading"
        :on-change="onChangeFun"
		:auto-upload="false"
		drag
        :on-exceed="handleExceed"
        multiple>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">
				将文件拖拽到此处，或
		        <em>点击上传</em>
			</div>
			<div class="el-upload__tip text-center">
				jpg/png files with a size less than 500kb
			</div>
		</el-upload>
		<el-button type="primary" @click="submitFileForm">确定</el-button>
		<el-button @click="handleCloseUpload">取消</el-button>
</template>

<script setup lang="ts">
let fileList: any = ref([]);
let limitFile: any = ref(3);
const onChangeFun = (file: any, list: any) => {
  // 判断上传文件是否已存在
  let existFile = list
      .slice(0, list.length - 1)
      .find((f: any) => f.name === file.name);
  if (existFile) {
    useMessage().error("当前文件已经存在!");
    list.pop();
  }
  fileList = list;
};
const submitFileForm = () => {
  if (!fileList.length) {
    useMessage().error("请上传至少一个文件!");
    return;
  }
  let formData = new FormData();
  fileList.forEach((item: any) => {
    formData.append("file", item.raw);
  });
  formData.append('id', '');
  // 这里写接口逻辑，将formData传给后端
}
const handleExceed = () => {
  useMessage().error(`最多上传${limitFile}个文件，请删除后重新上传！`);
}