el-upload 回显文件格式

### 实现 `el-upload` 组件中的文件格式回显 在 `el-upload` 组件中实现文件格式的回显，通常需要通过设置 `:file-list` 属性来展示已上传的文件列表。为了确保只显示特定文件格式的文件，可以通过过滤逻辑处理数据源并动态更新 `file-list` 的值。 以下是具体实现方式： #### 1. 过滤指定文件格式 在绑定到 `:file-list` 的数组中，仅保留符合条件的文件对象。可以基于文件名后缀或者 MIME 类型进行筛选[^2]。 ```javascript // 定义允许的文件类型 const allowedFormats = ['.png', '.jpg', '.jpeg', '.pdf']; // 原始文件列表 (假设从服务器返回) let serverFileList = [ { name: 'example.pdf', url: '/files/example.pdf' }, { name: 'image.jpg', url: '/files/image.jpg' }, { name: 'document.docx', url: '/files/document.docx' } ]; // 过滤函数 function filterByFormat(file) { const fileName = file.name.toLowerCase(); return allowedFormats.some(format => fileName.endsWith(format)); } // 应用过滤器 this.uploadFileList = serverFileList.filter(filterByFormat); ``` 上述代码片段展示了如何根据文件扩展名过滤文件列表，并将其赋值给 Vue 数据属性 `uploadFileList`，该属性用于绑定至 `:file-list`。 --- #### 2. 动态更新文件列表 当用户执行删除操作或其他交互行为时，应重新应用相同的过滤条件以保持一致性。 ```vue <template> <el-upload ref="upload" class="upload-demo" :limit="10" action="" accept=".png,.jpg,.jpeg,.pdf" :http-request="handleUploadRequest" :before-remove="beforeRemove" :file-list="filteredFileList" :on-preview="previewFile"> <button>点击上传</button> </el-upload> </template> <script> export default { data() { return { uploadFileList: [], // 存储原始文件列表 filteredFileList: [] // 显示经过过滤后的文件列表 }; }, methods: { handleUploadRequest(file) { this.uploadFileList.push({ ...file }); this.updateFilteredFiles(); // 更新过滤后的文件列表 }, beforeRemove(file) { const index = this.uploadFileList.indexOf(file); if (index !== -1) { this.uploadFileList.splice(index, 1); // 删除原文件列表项 this.updateFilteredFiles(); // 同步更新过滤后的文件列表 } }, updateFilteredFiles() { this.filteredFileList = this.uploadFileList.filter(this.isFileAllowed); }, isFileAllowed(file) { const fileName = file.name?.toLowerCase() || ''; return ['png', 'jpg', 'jpeg', 'pdf'].some(ext => fileName.endsWith(`.${ext}`)); }, previewFile(file) { window.open(file.url, '_blank'); } }, mounted() { // 初始化加载远程文件列表 fetch('/api/get-files') .then(response => response.json()) .then(data => { this.uploadFileList = data; this.updateFilteredFiles(); }) .catch(error => console.error('Failed to load files:', error)); } }; </script> ``` 此部分实现了完整的生命周期管理，包括初始化加载、新增文件以及移除文件的操作，并始终维持符合要求的文件列表。 --- #### 3. 避免页面闪动问题 如果遇到因 DOM 渲染引起的页面闪烁现象，可尝试隐藏未完成状态下的文件条目。例如，在样式层面屏蔽 `.is-ready` 和 `.is-uploading` 状态的元素[^1]。 ```css <style lang="scss" scoped> ::v-deep .el-upload-list__item.is-ready, ::v-deep .el-upload-list__item.is-uploading { display: none !important; } </style> ``` 以上 CSS 片段能够有效减少视觉干扰，提升用户体验。 --- #### 总结 通过合理配置 `:file-list` 并结合前端逻辑控制，可以在 `el-upload` 中轻松实现针对特定文件类型的回显功能。同时注意优化渲染性能，避免不必要的界面抖动或延迟。 ---