element-plus upload解决限制个数上传文件后再次上传没反应问题

最近在做一个文件上传的时候,由于后端没有写关于单独上传的方法,这里我也不是很清楚,饿了么团队在做这个组件时候的具体运行逻辑。这就导致了这样的一种情况发生,我在前端选择多个文件上传,但是后端的接口只是一个文件的变量接收,同样可以上传成功,但是返回的数据里面是第一个文件的上传信息,不清楚的地方在于它是对一个方法按照实际文件个数进行的循环上传还是后端的返回处理他有问题。。。。但最终结果文件上传的回调只执行了一次,大概率是后端的问题【前后端撕逼中,,,】

好了,回归我们的问题。我在前端做了每一次上传任务只能够同时上传一个文件操作,超出的话使用:on-exceed方法来进行提示。一切仿佛都很好,但是随着测试的进行,我发现在上传完成一个文件后,我再次点击上传却执行exceed方法,告诉我一次只能上传一个文件???看了很多教程,大多数都是说:

this.$refs.upload.clearFiles();

使用这个重置一下就可以了,经过我的分析,我发现根本没有卵用。
为了验证我的想法,我在这条语句的上下位置,各自打印了upload组件中属性值“fileList”即存放上传文件列表信息的属性,然后发现根本没有变化,说明官方提供的clearFiles()就是个笑话。
最后只需要在每次成功或者失败,都将fileList=[]制空就好了。相关组件代码如下:

    <el-upload
        class="upload-demo"
        drag
        ref="upload"
        action="http://XXXXXX:8080/courseData/uploadTest"
        :file-list="fileList"
        :data="courseData"
        :before-upload="beforUpload"
        :on-success="uploadSuccess"
        :on-error="uploadFail"
        :limit="1"
        :on-exceed="exceed"
        :auto-upload="false"
        multiple
      >

重要!!!一定要自己定义:file-list=“fileList”

  uploadSuccess(response) {
      console.log(this.fileList)
      this.showData.push(response.data);
      this.fileList=[];
      //  this.$refs.upload.clearFiles();
         console.log(this.fileList)
      this.dialogFormVisible = false;
      ElMessage({
        type: "success",
        message: "上传成功",
      });
    },
Element Plus 的 `eel-upload` 组件支持批量上传文件,当你需要检查所有文件是否已全部上传完毕时,可以结合使用 `file-list` 和 `on-change` 或 `on-progress` 事件监听器。 首先,你需要获取到所有上传文件的信息,通常会在 `file-list` 中看到每个文件的状态。你可以设置一个变量来记录正在上传的文件总数,以及一个数组来存储每个文件的唯一标识符和其对应的进度。 例如: ```html <template> <div> <el-upload ref="upload" :action="uploadUrl" :multiple="true" :file-list="fileList" @change="handleFileChange" @progress="checkUploadProgress" ></el-upload> <!-- 显示上传状态信息 --> <ul v-if="!allFilesUploaded"> <li v-for="(file, index) in fileList" :key="index"> {{ file.name }} - {{ file.percent || '等待上传' }} <span class="status" :class="{ uploading: file.status === 'uploading', done: file.status === 'done' }"></span> </li> </ul> </div> </template> <script setup> import { ref } from 'vue'; const uploadUrl = 'your-upload-url'; let allFilesUploaded = ref(false); let uploadedFiles = []; function handleFileChange(fileList) { // 更新fileList fileList.forEach((file) => { uploadedFiles.push(file); if (!file.status || file.status !== 'done') { allFilesUploaded.value = false; } }); } function checkUploadProgress(progressEvent) { const file = progressEvent.file; if (file && file.status === 'uploading') { // 更新单个文件的进度 const index = uploadedFiles.findIndex(f => f.uid === file.uid); if (index > -1) { uploadedFiles[index].percent = progressEvent.percentage; } // 检查是否所有文件都已上传 allFilesUploaded.value = uploadedFiles.every(file => file.status === 'done'); } } </script> ``` 当 `allFilesUploaded` 变为 `true` 时,说明所有的文件都已经上传完成。记得在实际应用中处理上传成功、失败及中断的情况。同时,确保在 `@change` 事件触发后初始化 `uploadedFiles` 数组,以便后续跟踪每个文件的上传状态。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值