<template>
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
>
<!-- 限定预览图高度 -->
<img v-if="imageUrl" :src="imageUrl" alt="avatar" :style="{width:imgSize[0] + 'px', height:imgSize[1] + 'px'}"/>
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
Upload
</div>
</div>
</a-upload>
</template>
<script>
export default {
data() {
return {
loading: false,
imageUrl: '',
imgSize: [200, 150]
};
},
</script>
<style>
/*css 清除图框内边距,图片占满upload盒子 */
.ant-upload.ant-upload-select-picture-card > .ant-upload{
padding: 0!important;
}
/*css 设置预览图片大小 */
/* .ant-upload > img{
width: 158px;
height: 128px;
} */
</style>
antd上传图片,预览图样式设置
最新推荐文章于 2024-05-14 11:22:12 发布