vue中input选择图片上传可删除
时间: 2023-12-06 16:42:50 浏览: 32
实现这个功能,可以使用Vue的文件上传插件,比如`vue-upload-component`或`vue-file-upload`等。这些插件可以将选择的文件转换成Base64编码的字符串,然后在前端进行预览和删除操作。
以下是一个示例代码,使用了`vue-upload-component`插件:
```html
<template>
<div>
<div>
<input type="file" @change="onFileChange">
</div>
<div>
<div v-for="(file, index) in files" :key="index">
<img :src="file.url" height="100">
<button @click="removeFile(index)">删除</button>
</div>
</div>
</div>
</template>
<script>
import VueUploadComponent from 'vue-upload-component';
export default {
components: {
'file-upload': VueUploadComponent
},
data() {
return {
files: []
}
},
methods: {
onFileChange(file) {
this.files.push({
name: file.name,
url: URL.createObjectURL(file),
file: file
});
},
removeFile(index) {
this.files.splice(index, 1);
}
}
}
</script>
```
在这个示例中,我们使用了`<input type="file">`元素来选择文件,并将选择的文件添加到`files`数组中。在数组中,每个文件对象包含文件名、Base64编码的URL和原始文件对象。
在Vue模板中,我们使用`v-for`指令遍历`files`数组,将每个文件对象渲染为一个图片和一个删除按钮。删除按钮的点击事件调用`removeFile`方法,从`files`数组中删除对应的文件对象。
这样,我们就可以实现在Vue中选择图片上传并删除功能。