vue上传图片并显示
时间: 2023-12-12 16:31:03 浏览: 86
vue实现图片上传功能
在Vue中上传图片并显示,可以使用HTML5的File API来实现。具体步骤如下:
1. 在模板中添加一个input元素,type为file,用于选择图片文件。
```
<template>
<div>
<input type="file" @change="handleFileChange">
<img :src="imageUrl" v-if="imageUrl">
</div>
</template>
```
2. 在Vue实例中定义一个data属性,用于存储选择的图片文件和图片的base64编码。
```
<script>
export default {
data() {
return {
file: null,
imageUrl: ''
}
},
methods: {
handleFileChange(e) {
this.file = e.target.files[0]
this.getImageUrl()
},
getImageUrl() {
const reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = e => {
this.imageUrl = e.target.result
}
}
}
}
</script>
```
3. 在handleFileChange方法中,获取选择的图片文件,并调用getImageUrl方法将图片转换为base64编码。在getImageUrl方法中,创建一个FileReader对象,调用它的readAsDataURL方法将图片转换为base64编码,并将结果赋值给imageUrl属性。最后,在模板中使用v-if指令判断imageUrl是否存在,如果存在则显示图片。
阅读全文