el-upload 回显时加载异步图片
时间: 2023-07-06 18:33:25 浏览: 48
在 `el-upload` 中,可以使用 `on-success` 事件来获取上传成功后的图片地址,并将其赋值给 `imageUrl` 变量,以便在页面上显示上传的图片。示例如下:
```html
<el-upload
class="avatar-uploader"
action="/upload"
:show-file-list="false"
:on-success="handleSuccess"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
```
```javascript
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
handleSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
}
}
}
```
在上述示例中,当上传成功后,会将上传成功后的图片文件赋值给 `imageUrl` 变量,并通过 `URL.createObjectURL` 方法生成一个临时的图片链接,以便在页面上展示。
需要注意的是,`URL.createObjectURL` 方法生成的链接是临时的,浏览器会在页面卸载时自动释放这些链接,避免内存泄漏问题。如果需要永久保存上传的图片,需要将图片存储到服务器中,并在页面中展示服务器存储的图片链接。