vue+element-ui form表单中显示图片
时间: 2023-11-08 21:02:18 浏览: 147
在Vue Element-UI的表单中显示图片,你可以使用Element-UI的Upload组件来实现。
首先,你需要在表单中添加一个Upload组件,用来上传图片:
```vue
<template>
<el-form>
<el-form-item label="图片">
<el-upload
class="upload-demo"
action="/upload" // 这里需要填写图片上传的接口地址
:show-file-list="false"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<img v-if="imageUrl" :src="imageUrl" style="max-width: 200px; max-height: 200px;" />
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
imageUrl: '' // 用来存储图片的URL
}
},
methods: {
handleSuccess(response, file) {
// 在上传成功后,将返回的图片URL赋值给imageUrl
this.imageUrl = response.url;
}
}
}
</script>
<style>
.upload-demo {
border: 1px dashed #ccc;
border-radius: 6px;
padding: 20px;
text-align: center;
}
</style>
```
在上述代码中,我们使用了`el-upload`组件来实现图片的上传功能。在上传成功后,会调用`handleSuccess`方法,将返回的图片URL赋值给`imageUrl`,然后在页面上使用`img`标签来显示图片。
请注意,你需要将`action`属性设置为你自己的图片上传接口地址。