针对你的问题,我们可以使用el-upload组件的自定义上传功能,并监听上传失败的事件来删除对应的文件。以下是详细的步骤和代码示例: 1. 实现el-upload组件的自定义上传功能 首先,我们需要在el-upload组件中设置http-request属性,以实现自定义上传功能。http-request允许你覆盖默认的上传行为,实现自定义的上传逻辑。 html ...
<!-- 点击上传 --> {{ $t('info.upload') }}</el-button > <!-- 只支持上传一个文件,且文件须小于30M --> {{ $t('info.uploadTip') }} </el-upload> </el-form-item> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32...
原因是当 上传的文件不符合 before-upload 绑定的函数 即 before-upload 绑定的函数 return false 时 会自动执行一次 on-remove 绑定的函数 这时只要在 on-remove 内判断一下索引值 <0(下面图2判断条件不对 以文字为准 懒得改了)不执行 就可以了
最近在使用element-ui的el-upload组件,发现一个问题,就是我在上传文件过程中,上传失败了,文件列表还展示,非常尴尬。 解决办法 关键代码如下 <el-upload class="upload-wrapper" :action="uploadUrl" :headers="headers" :on-success="handleUploadDmtSuccess" :on-remove="handleRemoveDmt" :file-list="dmtFileLi...
el-upload无法删除第一个之后的文件 这可能是由于你使用的是支持多文件上传的 el-upload 组件,但没有使用其中的 limit 属性限制上传文件的数量造成的,请在初始化 el-upload 时设置 limit 属性:this.elUploadLimit = 5 //限制上传文件最多为5个
在开发人员导入功能时，使用了Element Plus的el-upload组件进行文件上传。然而在测试过程中，我们遇到了一个棘手的问题。第一次上传文件时，文件列表正常显示，提交也顺利发送给后端。然而，当进行第二次文件上传时，组件无法响应，提交按钮失去了作用。在查阅文档和社区后，发现这可能是因为文件未被及时清理...
根据fileUploadRemove方法,file是上传失败的文件B的信息,此时this.fileList(保存上传成功的文件)中并没有保存文件B,因此findIndex会返回-1,导致最后会删除this.fileList数组中的最后一个数据项。 因此,在执行删除操作的时候,需要添加一些判断,确认文件是否需要被删除。
按照上述的问题描述,我们只需要在文件上传成功后及时删除文件即可,然后尝试使用handleRemove来删除前一个文件,相关代码如下。 <template> <el-upload ref="uploadRef"> ... :on-success="handleSuccess" </el-upload> </template> const uploadRef = ref(null); function handleSuccess(file, fileList) ...
场景:上传文件后重新选择一个文件上传,没有用。原因:主要是我们没有清除文件造成的。解决:上传成功后要清除,加上如下代码,就可以了。