vue上传单个图片并且带删除功能
时间: 2023-08-22 14:07:54 浏览: 92
基于VUE选择上传图片并页面显示(图片可删除)
好的,针对您的问题,我可以提供以下代码示例,用于实现Vue上传单个图片并带删除功能:
HTML模板代码:
```
<template>
<div>
<input type="file" @change="handleFileUpload">
<div v-if="imageUrl">
<img :src="imageUrl" alt="uploaded image" style="max-width: 200px;">
<button @click="deleteImage">删除图片</button>
</div>
</div>
</template>
```
Vue组件代码:
```
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.imageUrl = reader.result
}
},
deleteImage() {
this.imageUrl = ''
}
}
}
</script>
```
在该示例中,我们使用了`<input>`元素来让用户选择要上传的图片,并通过`FileReader`对象读取文件内容并将其转换为DataURL。然后,我们将DataURL赋值给`imageUrl`属性,以便在页面上显示上传的图片。最后,我们使用一个按钮来触发`deleteImage`方法,以便从页面中删除图片。
阅读全文