element plus解决单文件上传后无法替换问题

最新推荐文章于 2025-09-05 11:41:38 发布

原创最新推荐文章于 2025-09-05 11:41:38 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

当使用elementplus的el-upload组件并设置limit:1限制单个文件上传时，用户希望替换已上传文件会遇到问题。通过监听on-change事件，可以对uploadFiles数组进行操作，如在文件数量超过1时只保留最新的文件，实现文件替换功能。

在使用 element plus 框架 el-upload 组件时,如果想上传单个文件可能会设置limit:1, 但是用户在上传单个文件后发现自己想替换之前上传的文件, 此时你会发现此时重新点击上传组件并没有触发任何事件,哪怕你设置了on-change或 on-exceed方法

如果我们此时去掉limit:1的限制发现是可以调用on-change方法的, 而且on-change中有两个参数uploadFile和uploadFiles, 虽然此时会每次上传都会产生一个文件, 我们只需要对多出的文件进行数组操作即可

通过on-change事件我们直接对uploadFiles进行操作, 代码如下

<el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :data="upload.extraData"
        :disabled="upload.isUploading"
        :on-change="handleFileChange"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-remove="handleRemove"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="handleTempDownload">下载模板</el-link>
          </div>
        </template>
      </el-upload>

/** change事件 */
function handleFileChange (file, files) {
  if (files.length > 1) {
    fileList.value = [files[files.length - 1]]
  }
}