el-upload上传图片成功，详情页回显base64格式的图片

### 解决 `el-upload` 组件上传图片回显时显示多个文件的问题 为了使 `el-upload` 组件能够正确处理并显示多个已上传的图片，在设置 `file-list` 属性的同时还需要调整一些配置选项以及样式优化来避免页面闪动等问题。 #### 配置项说明 - **action**: 设置上传接口地址。 - **list-type**: 使用 `picture-card` 或者其他适合多图展示的形式。 - **auto-upload**: 控制是否自动上传，默认为 true。 - **on-preview**: 定义点击缩略图触发的动作函数，通常用于查看大图。 - **on-remove**: 文件列表移除文件时的钩子方法。 - **before-upload**: 上传前对文件进行校验或其他操作的方法。 - **http-request**: 自定义上传行为，可用于实现 base64 编码等方式传输数据[^2]。 针对只显示单个上传框的情况，可以通过监听组件事件动态更新 `file-list` 来确保每次成功上传新图片后都能及时刷新视图。另外需要注意的是当存在大量图片时可能会影响性能表现，因此建议合理控制每页加载数量或者采用懒加载机制提高用户体验。 对于因 `is-ready`, `is-uploading` 状态引起的闪烁现象，可通过自定义 CSS 覆盖默认样式隐藏这些状态下的元素： ```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> ``` 此外，如果希望支持批量选择图片，则应允许用户通过浏览器对话框一次性选取多张照片，并在前端完成初步筛选后再提交至服务器保存路径信息或转换成 Base64 字符串形式发送给服务端[^1]。 最后提醒一点就是关于跨域资源共享(CORS)政策的影响可能导致某些情况下无法正常获取远程资源链接作为预览源，请确认前后端均已妥善处理好此类权限问题[^3]。