使用el-upload完成文件的上传下载

### 使用 `el-upload` 组件实现文件上传与下载 #### 文件上传功能 通过 `el-upload` 组件，可以轻松实现文件上传的功能。以下是具体说明： - **action 属性**：指定文件上传的目标 URL 地址[^1]。 - **before-upload 方法**：用于在文件上传前执行一些验证逻辑，比如限制文件类型或大小。 - **on-success 和 on-error 回调**：分别处理文件上传成功和失败的情况。 下面是一个完整的文件上传示例代码： ```vue <template> <div> <!-- 文件上传 --> <el-upload action="https://example.com/upload" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError"> <el-button type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { methods: { handleBeforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); } return isLt2M; // 如果返回 false，则阻止上传 }, handleSuccess(response, file, fileList) { console.log('文件上传成功:', response); this.$message.success('文件上传成功'); }, handleError(err, file, fileList) { console.error('文件上传失败:', err); this.$message.error('文件上传失败'); } } }; </script> ``` --- #### 文件下载功能 对于文件下载的需求，可以通过动态创建 `<a>` 标签的方式实现。以下是从服务端获取文件链接并触发浏览器下载的具体方法[^2]。 下面是具体的文件下载示例代码： ```javascript methods: { download(href, name) { let eleLink = document.createElement('a'); // 创建 a 标签 eleLink.download = name || 'download'; // 设置下载的文件名 eleLink.href = href; // 设置文件路径 eleLink.style.display = 'none'; document.body.appendChild(eleLink); // 将 a 标签添加到 body 中 eleLink.click(); // 模拟点击事件 document.body.removeChild(eleLink); // 移除 a 标签 } } ``` 调用方式如下： ```javascript this.download('https://example.com/file.pdf', 'example-file.pdf'); ``` --- #### 父子组件通信（可选） 如果需要在一个父组件中管理多个子组件中的文件列表，可以通过父子组件之间的通信完成。例如，在父组件中监听子组件传来的文件列表变化。 父组件代码示例： ```vue <template> <div> <upload-images-list ref="uploadImagesRef" :imageList="item.images" @getImageList="updateImageList" /> </div> </template> <script> import uploadImagesList from './uploadImagesList.vue'; export default { components: { uploadImagesList }, data() { return { item: { images: [] } }; }, methods: { updateImageList(newList) { this.item.images = newList; // 更新父组件的数据 } } }; </script> ``` --- #### 关于 `:file-list` 的注意事项 `:file-list` 是一个只读属性，它并不会直接修改绑定的数组。因此，通常情况下，这个属性主要用于展示已有的文件列表（如编辑页面回显），而不适合用来实时更新文件状态[^3]。 --- #### 弹窗场景下的特殊处理 当 `el-upload` 被放置在弹窗中时，建议使用 `v-if` 控制其渲染状态，以避免因缓存导致的文件列表不清空等问题[^4]。 示例代码： ```vue <el-dialog v-model="dialogVisible" title="上传文件"> <el-upload v-if="dialogVisible" action="https://example.com/upload" multiple> <el-button>选择文件</el-button> </el-upload> </el-dialog> ``` --- ### 总结 以上展示了如何基于 `el-upload` 实现文件上传与下载的核心功能，并提供了相应的代码示例以及需要注意的关键点。