Vue elementui界面中插入图片
时间: 2023-07-11 18:37:44 浏览: 109
vue+elementUI实现表单和图片上传及验证功能示例
5星 · 资源好评率100%
在 Vue 中使用 ElementUI 组件库,可以通过 `el-upload` 组件实现图片上传和显示。以下是一个简单的示例:
```html
<template>
<div>
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: '',
};
},
methods: {
handleUploadSuccess(response, file) {
this.imageUrl = response.url;
},
beforeUpload(file) {
// 验证图片格式和大小等信息
},
},
};
</script>
<style scoped>
.avatar-uploader {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border: 1px dashed #ccc;
border-radius: 50%;
overflow: hidden;
}
.avatar-uploader-icon {
font-size: 28px;
color: #999;
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
```
在上面的示例中,使用了 `el-upload` 组件来实现图片上传,设置了上传成功的回调函数 `handleUploadSuccess`,将上传成功后的图片 url 赋值给 `imageUrl`,从而实现图片的显示。如果没有上传成功的图片,则显示一个加号图标。同时,通过设置一些样式,将上传组件样式化为圆形头像的形式,具体实现可以根据实际需求进行调整。
阅读全文