vue-element上传组件el-upload使用before-remove钩子问题

最新推荐文章于 2025-06-25 14:15:31 发布

归属i

最新推荐文章于 2025-06-25 14:15:31 发布

阅读量6.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43877725/article/details/108973509

前端专栏收录该内容

9 篇文章

订阅专栏

在Vue项目中，使用element-ui的el-upload上传组件时，为防止用户误删已上传的图片，通过before-remove钩子函数实现了删除前的确认提示，确保了操作的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为业务需求，删除已存在的图片需要确认是否删除，以进行下一步的处理

<template>
	<el-upload action=" " list-type="picture" multiple :limit="3" :before-remove="handleBeforeRemove" >
	</el-upload>
</template>

 	handleBeforeRemove(file, fileList) {
        const param = {
          fileId: file.name
        };

        //根据id移除图片
        //需要判断当前是修改还是新增状态
	
        //已上传文件删除前提醒确认
        return this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
        
		//删除业务
        removeBrandFile(file.name).then(response => {
       		if (response.code === 200) {
          		this.hideUploadAdd = false;
           		reject(true);
           		
           		this.$message({
        			type: 'success',
              		message: '删除成功'
            	});
            	
            }
        }).catch(() => {
        
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
            
            reject(false);
          });
        }
        
   }