el-upload 上传单个图片

### 使用 `el-upload` 组件上传单个图片 为了实现通过 `el-upload` 组件上传单张图片的功能，可以利用 Vue 和 Element UI 提供的相关属性和事件来简化操作。下面是一个具体的例子： #### HTML 部分 ```html <template> <div id="app"> <!-- 设置 :limit 属性控制最大允许上传数量 --> <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :http-request="customUpload" :file-list="fileList" :limit="1" list-type="picture"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <!-- 图片预览对话框 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> ``` #### JavaScript (Vue) 部分 ```javascript <script> export default { data() { return { fileList: [], // 文件列表 dialogImageUrl: '', // 当前显示的图片链接 dialogVisible: false, // 控制预览窗口可见性的变量 }; }, methods: { handleRemove(file, fileList) { // 删除回调函数 console.log(file, fileList); }, handlePreview(file) { // 查看大图回调函数 this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeUpload(file) { // 上传之前判断文件类型大小等信息 const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPGorPNG) { this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); } if (!isLt500K) { this.$message.error('上传头像图片大小不能超过 500KB!'); } return isJPGorPNG && isLt500K; }, customUpload(options) { // 自定义上传逻辑 let formData = new FormData(); formData.append("file", options.file); axios({ url: "your_upload_api_endpoint", method: "post", headers: {'Authorization': 'Bearer your_token'}, // 添加 token 到 header 中 data: formData, }) .then(response => { console.log(response.data); // 处理服务器返回的数据 }); } } } </script> ``` 此代码片段展示了如何配置 `el-upload` 来限制只上传一张图片，并提供了自定义上传行为的能力，包括添加必要的 HTTP 请求头部以及处理响应数据[^1]。