element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。

原创已于 2022-11-29 16:32:23 修改 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

于 2022-05-10 14:11:09 首次发布

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

element ui

7 篇文章

订阅专栏

本文介绍了ElementUI的Upload组件在文件上传后无法再次上传的问题及其原因。当文件上传成功或失败后，浏览器会保留已上传文件，导致用户无法进行第二次上传。为了解决这个问题，可以在`on-success`回调中使用`this.$refs['upload'].clearFiles()`方法清除历史记录。提供了一段Vue.js代码示例展示了如何在上传成功后调用此方法，从而允许用户重新上传文件。

问题：

Element UI Upload 组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。

原因：

第一次上传文件后，浏览器还保存着我们已经上传的文件，所以要想继续上传文件，就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件

方法：

利用 :on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件，其中ref="upload"与this.$refs[“upload”]要对应。

代码实现如下：

 <el-upload ref="upload" :on-success="onSuccess" >
       <el-button slot="trigger" size="small" type="primary" plain>
              上传
       </el-button>
</el-upload>

    // 文件上传成功时的钩子
    onSuccess(res, file) {
          this.$refs["upload"].clearFiles(); //上传成功之后清除历史记录
        },

element ui upload组件文件上传一次 后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。

问题：

原因：

方法：

代码实现如下：

element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。