el-upload 单图片上传

### 使用 `el-upload` 组件实现单图片上传 为了实现单一图片的上传功能，可以利用 Element UI 提供的 `el-upload` 组件。此组件允许通过配置不同的属性来自定义上传行为，如限制文件数量、显示已上传文件列表等。 #### 配置项说明 - **action**: 设置上传接口地址。 - **show-file-list**: 控制是否展示文件列表，默认为 true；对于仅需上传一张图片的应用场景可设为 false 来简化界面[^1]。 - **before-upload**: 自定义上传前处理函数，在这里可以根据业务需求对文件进行初步校验，比如检查文件尺寸和格式[^3]。 - **on-success**: 成功回调函数，用于接收服务端返回的数据并执行相应操作，例如更新视图状态或提示用户成功消息[^5]。 - **limit**: 当需要严格控制只能上传一个文件时，可以通过该属性设定最大允许上传的数量为 1。 下面是一个简单的 Vue.js 示例代码片段展示了如何使用上述选项完成一次基本的单张图片上传： ```html <template> <div id="app"> <!-- 单图片上传 --> <el-upload class="upload-demo" action="/api/upload" /* 替换成实际的服务端API */ :show-file-list="false" /* 不显示文件列表 */ :before-upload="handleBeforeUpload" :on-success="handleSuccess" :limit="1"> /* 只允许上传一个文件 */ <button type="primary">点击上传</button> </el-upload> <!-- 展示上传成功的图片 --> <img v-if="imageUrl" :src="imageUrl" alt="" /> </div> </template> <script> export default { data() { return { imageUrl: '' }; }, methods: { handleBeforeUpload(file) { /* 上传之前验证文件合法性和其他逻辑 */ const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleSuccess(response, file){/* 处理上传完成后服务器响应数据 */ console.log("response:", response); this.imageUrl = URL.createObjectURL(file.raw); // 显示刚刚上传好的图片 } } }; </script> ``` 在这个例子中，当用户选择了一个有效的 JPEG 图片并且其体积不超过两兆字节之后才会触发真正的 HTTP POST 请求发送给 `/api/upload` 接口。一旦收到成功的回复，则会调用 `handleSuccess()` 方法来刷新页面上的图像预览区域[^2]。