element elcolumn 使用本地图片_配合Element-ui实现证件照的上传,查看,回显功能
时间: 2024-02-17 14:03:32 浏览: 138
要使用本地图片,可以使用`el-upload`组件来实现上传,然后使用`el-image`组件来显示图片。具体步骤如下:
1. 在 `el-upload` 组件中设置 `action` 属性为上传图片的后端接口地址,设置 `show-file-list` 属性为 `false`,表示不显示已上传的文件列表。
```html
<el-upload
action="/upload"
show-file-list="false"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
```
2. 在 `el-upload` 组件上监听 `change` 事件,在事件处理函数中获取上传成功的图片地址,保存到组件的 `imageUrl` 属性中。
```html
<el-upload
action="/upload"
show-file-list="false"
@change="handleChange"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
```
```js
data() {
return {
imageUrl: ''
}
},
methods: {
handleChange(response) {
if (response.status === 200) {
this.imageUrl = response.data.imageUrl
}
}
}
```
3. 在 `el-image` 组件中通过 `src` 属性绑定 `imageUrl` 属性,即可显示上传的图片。
```html
<el-image
:src="imageUrl"
style="max-width: 200px;"
></el-image>
```
这样就可以实现上传,查看和回显本地图片的功能了。
阅读全文