el-upload上传过后文件显示自定义

### 实现 `el-upload` 组件自定义上传完成后的文件显示样式 为了满足需求，在 Vue 和 Element UI 中可以利用 `el-upload` 的钩子函数来控制文件上传的行为以及展示逻辑。通过设置属性 `auto-upload=false` 来阻止默认的自动上传行为，转而使用手动触发的方式处理文件上传过程中的各项操作。 当文件成功上传并返回服务器响应之后，可以通过监听事件 `on-success` 或者对于不涉及实际 URL 上传的情况采用模拟成功的机制，进而更新本地状态以反映最新的文件列表及其相关信息[^1]。 下面是一个具体的实现案例： ```vue <template> <div v-for="(item, index) in fileList" :key="index"> <!-- 使用 scoped slot 定制已上传文件项 --> <el-upload class="upload-demo" action="" :before-upload="() => false" :file-list="item.files" :on-change="(file, fileList) => handleChange(file, fileList, item)" :http-request="(option) => handleHttpRequest(option, item)"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> <!-- 自定义文件列表项模板 --> <template #file="{ file }"> <span>{{ `${file.name} (第${index + 1}个)` }}</span> </template> </el-upload> </div> </template> <script> export default { data() { return { fileList: [ { files: [] }, // 初始化第一个 upload 组件的状态 // 可根据实际情况动态增加更多对象... ], }; }, methods: { handleChange(file, fileList, currentItem) { // 更新当前项目的文件列表 currentItem.files = fileList; // 这里可以根据业务逻辑做进一步处理 }, handleHttpRequest({ file }, currentItem) { const formData = new FormData(); formData.append('file', file); formData.append('index', this.fileList.indexOf(currentItem)); // 假设这里执行异步请求或其他形式的数据提交， // 成功后调用 resolve 函数表示上传已完成。 setTimeout(() => { console.log(`${currentItem.index}: ${file.name}`); // 模拟上传成功的结果反馈给 el-upload 控件 currentItem.files.push({ name: file.name, url: 'https://example.com/path/to/file', }); }, 1000); // 模拟网络延迟 // 返回 Promise 对象告知框架上传结束 return new Promise((resolve) => { resolve(); }); } } }; </script> ``` 在这个例子中，通过 `v-for` 循环创建了多个 `el-upload` 组件实例，并为每一个分配了一个唯一的索引用于区分不同的组件。同时，借助于插槽 (`slot`) 功能来自定义渲染已经上传过的文件条目，从而达到调整文件显示样式的灵活性。