element-Plus中el-upload一次上传多个文件
实现的页面效果
话不多说直接上代
template模板代码
<el-dialog
v-model="dialogTableVisible"
title="上传文件"
style="margin-top: 100px"
>
<el-upload
class="upload-demo"
v-loading="formLoading"
:file-list="fileList"
:auto-upload="false"
:limit="10"
action="#"
:multiple="true"
:on-change="uploadSuccess"
accept=".xlsx,.jpg, .png, .gif,.json"
drag
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处,或 <em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip" style="color: red">
可以上传.xlsx,.jpg, .png, .gif,.json格式
</div>
</template>
</el-upload>
<template #footer>
<span class="dialog-footer">
<el-button @click="uploadSure" :disabled="isbutton">确定</el-button>
<el-button type="primary" @click="dialogTableVisible = false">
取消
</el-button>
</span>
</template>
</el-dialog
js代码
// loading加载效果
const formLoading = ref(false);
let fileList = reactive<UploadUserFile[]>([]);//用于存储文件列表的数组
let uploadSuccess = (item: any, itemList: any) => {
// console.log(itemList);
fileList = itemList;
};
点击确定按钮发送请求到后端
let uploadSure = async () => {
if (fileList.length == 0) {
ElMessage.error("请上传文件");
return;
}
isbutton.value = true;
const formData = new FormData();
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
fileList.forEach((file: any) => {
formData.append("files", file.raw);
});
formLoading.value = true;
//调用接口发送请求,这里是自己已经封装好的接口函数
await FileUploadApi(formData).then((res) => {
formLoading.value = false;
dialogTableVisible.value = false;
//上传成功重新调用页面接口数据
getFile();
fileList = [];
ElMessage({
showClose: true,
message: "上传成功",
type: "success",
});
});
};