elementUI图片上传过一次之后,再上传无反应

445 阅读1分钟

问题描述:在使用elementUI的el-upload上传图片的时候,上传完一张图片之后,再进行上传一次。没有反应,接口也没有调用。 问题原因:图片上传之后组件会一直保存你的文件信息。
解决: 调用的组件的this.$refs.upload.clearFiles();方法,每次上传之后清除一下的文件信息即可。 html代码:

<el-upload
      class="upload-demo"
      :action="URL"
      ref="upload"
      :headers="{ token: token }"
      :on-success="handleAvatarSuccess"
      :on-error="onError"
      name="image"
      :show-file-list="false"
      :data="{ type: 1, sortedNum: 1 }"
      accept=".jpeg,.png"
      :limit="1"
    >
      <el-button type="primary" size="mini">上传图片</el-button>
    </el-upload>

JS代码

 handleAvatarSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.$refs.upload.clearFiles();
      this.fetchData();
    },