Vue 使用elementUI upload 删除图片/移除图片的方法
组件渲染<el-upload:action="actionUrl":on-preview="handlePreview":on-remove="handleRemove":headers="headerObj"list-type="picture":on-success="handleSuccess"><el-button size="small" type="primary"&
·
组件渲染
<el-upload
:action="actionUrl"
:on-preview="handlePreview"
:on-remove="handleRemove"
:headers="headerObj"
list-type="picture"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
里面的
:on-remove="handleRemove"
就是删除事件
绑定后的js操作
handleRemove(file){
// 1.获取将要删除图片的临时路径
const filePath = file.response.data.tmp_path
// 2.从pics数组中,找到图片对应的索引值
const i = this.formData.pics.findIndex(x => x.pic === filePath)
// 3.调用splice方法,移除图片信息
this.formData.splice(i, 1)
},
更多推荐
已为社区贡献2条内容
所有评论(0)