Element UI Upload 组件文件上传无反应问题解决方案

问题描述

在使用 Element UI 的 Upload 组件进行文件上传时，存在以下问题：无论是在上传成功之后修改文件再次上传，还是在上传失败后重新上传，再次点击上传都没有任何反应，无法触发上传事件。

问题分析

这个问题的主要原因是由于 Upload 组件默认只监听 onChange 事件，只有在选择文件后才会触发上传操作。当再次选择相同的文件时，组件并不会再次触发 onChange 事件，导致上传按钮无法点击。

解决方案

方法一：监听文件的变化

将组件的 on-change 事件改为 on-input 事件，这样每一次文件的变化都会触发上传操作。修改代码如下：

<el-upload
  action="/upload"
  :on-input="fileChange"
  :auto-upload="false"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button slot="upload">上传到服务器</el-button>
</el-upload>

methods: {
  fileChange(file) {
    if (file) {
      // 执行上传操作
      this.uploadFile(file);
    }
  },
  uploadFile(file) {
    // 自定义上传逻辑，将文件上传到服务器
    // ...
  }
}

方法二：手动重置上传组件

在上传失败或上传成功后，手动重置 Upload 组件，使其可以重新选择和上传文件。修改代码如下：

<el-upload
  ref="upload"
  action="/upload"
  :auto-upload="false"
>
  <el-button slot="trigger" type="primary" @click="selectFile">选取文件</el-button>
  <el-button slot="upload" type="success" @click="submitUpload">上传到服务器</el-button>
  <el-button slot="preview" type="warning" @click="resetUpload">重置</el-button>
</el-upload>

methods: {
  selectFile() {
    this.$refs.upload.click();
  },
  submitUpload() {
    // 自定义上传逻辑，将文件上传到服务器
    // ...
  },
  resetUpload() {
    this.$refs.upload.clearFiles();
  }
}

结语

通过以上两种方法，我们可以解决 Element UI Upload 组件文件上传无反应的问题。通过监听文件的变化或手动重置上传组件，使得再次选择和上传文件时可以正常触发上传操作。希望这篇博客对大家有所帮助，谢谢阅读！