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

好了,回归我们的问题。我在前端做了每一次上传任务只能够同时上传一个文件操作,超出的话使用: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: "上传成功",
      });
    },
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐