elementUi上传组件的删除指定图片的操作

it2026-02-22  11

elementUi上传组件的删除指定图片的操作

官网没有一个删除操作的内容,全是console.log,不知道怎么删除,绑定的file-list,打印这个list都没啥东西。 我的图片效果

<el-upload ref='uploadImg' action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList" :show-file-list='true'> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload>

删除的方式就是先把fileList里的数据删除一个,然后再移除掉就行了, 代码如下

// 如果不写if判断的话控制台会有一个报错的问题, handleRemove (file) { if (this.fileList.indexOf(this.baseImg + file.url)) { this.fileList.splice(this.fileList.indexOf(this.baseImg + file.url), 1); } // 删除 for (let key in file) { delete file[key]; } },

// 如果不写if判断的话控制台会有一个报错的问题, // 并且再次上传的时候会有一个空白,删除多少个就有多少个空白

最新回复(0)