el-upload自定义文件列表

在使用el-upload组件时，你可以通过设置show-file-list为false来禁用自带的文件列表。然后，你可以在data中定义一个fileList数组，用于存放文件列表的数据。在uploadSuccess方法中，你可以将当前上传的文件和文件列表作为参数，并将fileList数组清空并赋值为新的文件列表，以更新文件列表的显示。

具体操作如下：
1. 在data中定义一个fileList数组：data(){ return{ fileList:[] } }
2. 在el-upload组件中设置show-file-list为false，禁用自带的文件列表。
3. 在uploadSuccess方法中，将当前上传的文件和文件列表作为参数，清空fileList数组，并将其赋值为新的文件列表。

以下是示例代码：

<el-upload
  show-file-list="false"
  :on-success="uploadSuccess"
>
  <!-- 其他上传相关配置 -->
</el-upload>

data() {
  return {
    fileList: []
  }
},
methods: {
  uploadSuccess(file, fileList) {
    this.fileList = []
    this.fileList = fileList
  }
}

你可以根据自己的需求对文件列表的展示进行自定义，比如使用表格展示，可以参考官方文档中的具体参数说明和示例代码。另外，你还可以根据文件大小展示问题进行处理，比如将文件大小以KB或MB的形式显示，并可以根据需要添加文件下载和删除的功能。同时，你也可以对上传文件的大小和类型进行校验。通过以上的操作，你就可以实现el-upload的自定义文件列表功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-upload自定义文件列表](https://blog.csdn.net/weixin_60945744/article/details/127212452)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示](https://blog.csdn.net/ka_xingl/article/details/115522816)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]