vue2上传图片并且可以回显,可以删除
时间: 2023-08-19 20:04:08 浏览: 134
好的,关于你的问题,我可以给出以下思路:
1. 使用 Vue2 提供的 `<input type="file">` 标签实现图片上传功能,可以使用 `FormData` 对象来处理上传数据
2. 将上传的图片通过 Ajax 请求发送到后端进行处理,并返回图片的路径或者其他相关信息
3. 在前端将上传成功的图片路径显示出来,并提供删除功能,可以通过 `v-for` 指令和数组的操作来实现
以下是一个简单的实现示例:
```html
<template>
<div>
<input type="file" @change="handleFileChange">
<div v-for="(image, index) in images" :key="index">
<img :src="image.url" alt="uploaded image">
<button @click="handleImageDelete(index)">删除</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: []
}
},
methods: {
handleFileChange(event) {
const file = event.target.files[0]
const formData = new FormData()
formData.append('image', file)
// 发送 Ajax 请求上传图片
// 这里可以使用 axios 或者其他类似的库来实现
// 上传成功后,将返回的图片信息添加到 images 数组中
// 比如:
// this.images.push({
// url: response.data.url,
// id: response.data.id
// })
},
handleImageDelete(index) {
// 根据 index 删除对应的图片信息
this.images.splice(index, 1)
// 发送 Ajax 请求删除后端对应的图片
// 比如:
// const imageId = this.images[index].id
// axios.delete(`/api/images/${imageId}`)
}
}
}
</script>
```
需要注意的是,以上代码仅为示例,实际情况中还需要根据具体需求进行修改和完善。同时,上传图片涉及到文件存储和网络传输等安全问题,需要谨慎处理。
阅读全文