一、template
<el-form-item label="图片" prop="images"><el-uploadaction="#":accept="['image/jpeg', 'image/png', 'image/gif'].join(',')"list-type="picture-card":auto-upload="true":on-change="handleUploadChange":before-upload="beforeUpload":file-list="fileList":http-request="customUpload":on-remove="handleRemove":on-preview="handlePictureCardPreview"><el-icon><Plus /></el-icon></el-upload></el-form-item>
......
......
......
<el-dialog v-model="imgVisible" style="wigth: 60%; height: auto"><img :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /></el-dialog>
二、js
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
......
......
......
const fileList = ref<Array<{ name: string; url: string }>>([]) // 用于显示已上传的图片列表（最多1张）// 限制上传文件类型和大小
const beforeUpload = (file) => {const isImage = file.type.startsWith('image/')const isLt2M = file.size / 1024 / 1024 < 2if (!isImage) {ElMessage.error('只能上传图片文件！')}if (!isLt2M) {ElMessage.error('图片大小不能超过2MB！')}return isImage && isLt2M
}// 自定义上传逻辑
const customUpload = async (options) => {const file = options.filereturn new Promise((resolve) => {const reader = new FileReader()reader.onload = (e) => {formData.value.images = e.target.result // 将Base64存入formDatafileList.value = [{name: file.name, // 保留文件名url: e.target.result as string // 完整的 Base64 URL}] // 更新文件列表（仅1张）resolve(true)}reader.readAsDataURL(file) // 转换为Base64})
}// 处理文件变化（可选）
const handleUploadChange = (file) => {console.log('当前文件:', file)
}// 处理删除操作
const handleRemove = () => {formData.value.images = '' // 清空Base64数据fileList.value = [] // 清空文件列表
}
const dialogImageUrl = ref('')
const imgVisible = ref(false)
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {dialogImageUrl.value = uploadFile.url!imgVisible.value = true
}
注意：在open表单的方法里初始化 fileList（编辑时回显图片)
// 初始化 fileList（编辑时回显图片）if (formData.value.images) {fileList.value = [{ url: formData.value.images }]}
注意：在需要的地方置空图片（例如关闭弹窗时)
fileList.value = [] // 清空 fileList
