el-upload自定上传列表删除,上传列表已删除,提交数据仍存在问题

Element UI 中,el-upload 组件支持通过插槽(slot)来自定义文件列表的展示方式。这通常是通过 file-list 插槽来实现的。下面是一个使用 el-upload 组件并通过 file-list 插槽来自定义文件列表展示的完整示例代码。

在这个示例中,我将展示如何自定义每个文件的显示方式,包括文件名、文件大小、上传进度和删除操作。

复制代码
<template>  
  <div>  
    <el-upload  
      ref="upload_attach"
      class="upload-demo"  
      action="你的文件上传接口URL"  
      :on-preview="handlePreview"  
      :on-remove="handleRemove"  
      :file-list="fileList"  
      :auto-upload="true" <!-- 设置为true以自动上传文件 -->  
      :on-change="handleChange"  
      :on-progress="handleProgress" <!-- 监听上传进度 -->  
      multiple  
    >  
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>  
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>  
  
      <!-- 自定义文件列表 -->  
      <div slot="file" slot-scope="{file}">
          <div class="file-name">{{ file.name }}</div>  
          <div class="file-size">{{ formatFileSize(file.size) }}</div>  
          <div v-if="file.percentage" class="file-progress">{{ file.percentage }}%</div>  
          <el-button  
            size="mini"  
            type="danger"  
            @click="$refs.upload_attach.handleRemove(file)"  
          >删除</el-button>  
      </div>  
    </el-upload>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      fileList: []  
    };  
  },  
  methods: {  
    handlePreview(file) {  
      console.log('preview', file);  
    },  
    handleRemove(fileName, fileList, index) {  
      this.fileList = fileList // 注意更新绑定的fileList,否则已删除的数据仍存在问题
    },  
    handleChange(file, fileList) {  
      // 这里通常不需要手动修改fileList,除非你有特殊的处理逻辑  
    },  
    handleProgress(event, file, fileList) {  
      // 更新文件的上传进度  
      for (let i = 0; i < fileList.length; i++) {  
        if (fileList[i].raw === file.raw) {  
          fileList[i].percentage = event.percent; // 假设event.percent是上传进度百分比  
          break;  
        }  
      }  
    },  
    formatFileSize(size) {  
      if (size / 1024 > 1024) {  
        return (size / 1024 / 1024).toFixed(2) + ' MB';  
      } else {  
        return (size / 1024).toFixed(2) + ' KB';  
      }  
    }  
  }  
};  
</script>  
  
<style>  
.upload-file-list .upload-file-item {  
  margin-top: 10px;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
.upload-file-list .file-name,  
.upload-file-list .file-size {  
  margin-right: 10px;  
}  
</style>

在上述代码中,直接调用上传组件源码中的handleRemove,去删除自定义slot中的file

复制代码
 <!-- 自定义文件列表 -->  
          <div slot="file" slot-scope="{file}">
          <div class="file-name">{{ file.name }}</div>  
          <div class="file-size">{{ formatFileSize(file.size) }}</div>  
          <div v-if="file.percentage" class="file-progress">{{ file.percentage }}%</div>  
          <el-button  
            size="mini"  
            type="danger"  
            @click="$refs.upload_attach.handleRemove(file)"  
          >删除</el-button>  
      </div>  

一定要注意,使用这个$refs.upload_attach.handleRemove(file)删除上传的文件列表,并不会主动的删除绑定的:file-list="fileList" 中fileList的数据,需要配合:on-remove="handleRemove" ,在on-remove中重新给fileList赋值,否则上传时会出现,上传列表中文件删除,提交的时候仍然存在的问题

相关推荐
陈随易3 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1014 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma777 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在7 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月9 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang11 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻12 分钟前
前端面试十一之TS
前端
摆烂为不摆烂12 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead25 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00128 分钟前
封装一个有最小化的dialog组件
前端·javascript·css