el-upload上传回显

### 实现 `el-upload` 组件上传后的文件预览和回显 为了实现 `el-upload` 组件在 Vue 和 Element UI 中的文件上传后预览和回显功能，可以按照如下方法配置： #### 配置 `el-upload` 组件属性 通过设置 `action` 属性指定服务器端接收上传请求的 URL 地址。对于视频或其他类型的文件，确保该地址能够处理不同 MIME 类型的数据。 ```html <template> <div class="upload-demo"> <el-upload :headers="{'Authorization': token}" action="/api/upload" list-type="picture-card" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :file-list="fileList" multiple> <i slot="default" class="el-icon-plus"></i> </el-upload> <!-- 对于非图片类文件 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" v-if="isImage" :src="dialogImageUrl" alt=""> <video controls autoplay v-else><source :src="dialogVideoUrl" type="video/mp4">您的浏览器不支持 video 标签。</video> </el-dialog> </div> </template> <script> export default { data() { return { fileList: [], // 存储已上传成功的文件列表 dialogVisible: false, isImage: true, dialogImageUrl: '', dialogVideoUrl: '' }; }, methods: { handlePreview(file) { this.dialogVisible = true; if (['image/jpeg', 'image/png'].includes(file.type)) { this.isImage = true; this.dialogImageUrl = file.url || file.raw; } else if (file.type === 'video/mp4') { this.isImage = false; this.dialogVideoUrl = file.url || file.raw; } }, beforeUpload(file) { const isValidType = ['image/jpeg', 'image/png', 'video/mp4'].indexOf(file.type) !== -1; if (!isValidType) { this.$message.error('仅允许上传JPEG/PNG图片或MP4格式视频'); } return isValidType; }, handleRemove(file, fileList) {} } }; </script> ``` 上述代码片段展示了如何利用 `el-upload` 的钩子函数来控制不同类型文件（如图像和视频）的显示逻辑[^3]。 #### 处理页面闪动问题 当使用 `file-list` 属性时可能会遇到页面闪烁的情况，可以通过自定义 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> ``` 这段样式规则会使得处于预备状态(`is-ready`)或是传输过程中的项目不可见，从而减少视觉上的干扰[^2]. #### 获取 Token 并传递给 Header 如果 API 接口需要身份验证，则可以在发起 HTTP 请求之前加入认证信息到头部字段中去。这里假设是从本地存储读取名为 "token" 的 cookie 值作为凭证[^4]: ```javascript import { getToken } from '@/utils/auth'; // 将此部分添加至 script 节点内的 data 函数里 data(){ return{ ... token:getToken(), } }, ``` 这样做的目的是为了让每次发送出去的 POST 请求都携带有效的授权令牌以便顺利访问受保护资源接口。