elementplus的文件上传组件

### Element Plus 文件上传组件使用说明 #### 组件概述 `<el-upload>` 是 Element Plus 提供的一个用于实现文件或图片上传功能的组件。该组件支持多种自定义选项，可以满足不同场景下的需求。 #### 基本属性设置 为了使 `<el-upload>` 正常工作，需指定 `action` 属性来指明接收上传请求的服务端地址[^1]： ```html <template> <el-upload action="https://jsonplaceholder.typicode.com/posts/"> <button type="button">点击上传</button> </el-upload> </template> ``` #### 处理上传前后的钩子函数 通过设置 `before-upload`, `on-progress`, 和 `on-success` 等事件处理程序，可以在各个阶段执行特定逻辑操作: ```javascript <script setup lang="ts"> import { ref } from 'vue' const handleBeforeUpload = (file: File) => { console.log('准备上传:', file.name) } const handleProgress = (event: ProgressEvent, file: File) => { console.log(`正在上传 ${Math.round(event.loaded / event.total * 100)}%`) } const handleSuccess = (response: any, file: File) => { console.log('成功上传:', response.data.url) } </script> <template> <el-upload :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" action="https://jsonplaceholder.typicode.com/posts/" > <button type="button">点击上传</button> </el-upload> </template> ``` #### 图片预览与列表展示 如果希望显示已选文件缩略图，则可开启 `list-type="picture-card"` 并配合 `show-file-list=true` 来启用文件列表视图；对于图片类型的文件还可以利用内置的方法提供在线预览能力: ```html <template> <el-upload list-type="picture-card" show-file-list :on-preview="(file) => previewImage(file)" action="https://jsonplaceholder.typicode.com/posts/" > <i class="el-icon-plus"></i> </el-upload> <!-- 预览对话框 --> <el-dialog v-model="dialogVisible" title="图片预览"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </template> <script setup lang="ts"> import { ref } from 'vue' let dialogImageUrl = '' let dialogVisible = false function previewImage(file: any){ dialogImageUrl = URL.createObjectURL(file.raw!) dialogVisible = true } </script> ``` #### 更多功能扩展 除了上述基本用法外，还提供了诸如拖拽上传、分片传输等功能的支持，具体细节参见官方文档获取更多信息[^2].