单独上传
<el-upload v-model:file-list="fileList" accept=".pdf"
:action="`${this.$http.BASE_URL}/graduationOperate/hooking`" :show-file-list="false"
:before-upload="beforeUpload" :disabled="progressShow" :on-success="handleSuccess" multiple>
<el-button type="success" style="margin-left:20px;">上传</el-button>
</el-upload>
多个上传 走一个接口
<template>
<el-upload v-model:file-list="fileListHitch" :auto-upload="false" :on-change="hitchApi"
:action="hitchAction" multiple :limit="10" accept=".pdf" :show-file-list="false"
style="margin:0 15px;">
<el-button type="success" style="margin-left:20px;">上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
//批量挂接
hitchApi(file, fileList) {
this.fileListHitch = fileList;
// 每次触发时先清除之前的定时器
clearTimeout(this.debounceTimer);
// 设置新的定时器,延迟 300ms 后执行上传
this.debounceTimer = setTimeout(() => {
// 确保文件列表是最新的
const currentFileList = [...this.fileListHitch];
if (currentFileList.length === 0) return;
const formData = new FormData();
currentFileList.forEach((file) => {
formData.append('file', file.raw); // 注意字段名要和后端一致
});
axios.post(`${this.$http.BASE_URL}/graduationOperate/hooking`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
this.$message.success('上传成功');
this.fileListHitch = [];
this.search();
this.getTree();
// console.log(this.fileListHitch, 'liebiao')
})
.catch((error) => {
this.$message.error('上传失败');
console.error(error);
});
}, 300); // 300ms 延迟足够覆盖连续选择文件的场景
},
}
}
</script>
<style>
</style>