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赋值，否则上传时会出现，上传列表中文件删除，提交的时候仍然存在的问题