[详细] -->
赞
踩
赞
踩
效果图
html
<template> <div class="box"> <el-popover width="200" placement="top" trigger="hover"> <el-image v-if="avatarImg" width="200px" style="width: 100%; height: 130px; border-radius: 5px;" :src="avatarImg" :preview-src-list="[avatarImg]"> </el-image> <div v-else style="width: 100%; height: 130px; line-height: 130px; text-align: center; background-color: #eeeeee; border-radius: 4px; cursor: pointer;" @click.prevent="handleUpload"> 暂无图片 </div> <template #reference> <el-button class="coll" type="info" @click.prevent="handleUpload">上传图片</el-button> </template> </el-popover> </div> </template>
JavaScript
export default { name: 'Login', data() { return { avatarImg: '' } }, methods: { async handleUpload() { try { const [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const formData = new FormData(); formData.append('file', file); this.avatarImg = URL.createObjectURL(file); // 上传到服务器 // const response = await fetch('/upload', { // method: 'POST', // body: formData // }); // console.log('response: ', response); } catch (error) { console.error('Error selecting file:', error); } } } }
style
.box {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.login-btn-coll {
.coll {
width: 100%;
height: 50px;
}
}
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。