在el-from中显示图片
时间: 2024-05-14 22:18:09 浏览: 115
要在el-form中显示图片,可以使用el-upload组件上传图片,然后将上传成功的图片链接作为表单项的值进行提交。
具体操作步骤如下:
1. 在el-form中添加el-upload组件,设置action属性为上传图片的接口地址,设置on-success属性为上传成功后的回调函数。
```html
<el-form>
<el-form-item label="图片">
<el-upload
action="/upload"
:on-success="handleUploadSuccess"
:show-file-list="false">
<img v-if="imageUrl" :src="imageUrl" style="max-width: 100%">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
```
2. 在data中定义imageUrl属性用于存储上传成功后的图片链接。
```js
data() {
return {
imageUrl: ''
}
}
```
3. 在handleUploadSuccess方法中,获取上传成功后的图片链接,并赋值给imageUrl。
```js
methods: {
handleUploadSuccess(response, file, fileList) {
this.imageUrl = response.data.url
}
}
```
这样,在el-form中上传图片后,就可以显示上传成功的图片了。
阅读全文