el-upload主动删除文件

### 如何在 `el-upload` 组件中主动删除已上传的文件 在 Element UI 的 `el-upload` 组件中，默认提供了通过点击“删除”按钮来移除文件的功能。如果需要主动删除已上传的文件，则可以通过操作组件内部维护的文件列表 (`fileList`) 来实现。 以下是具体实现方式： #### 方法一：通过修改 `fileList` 可以手动控制 `el-upload` 的 `fileList` 属性，该属性表示当前已经上传成功的文件列表。当需要主动删除某个文件时，只需从 `fileList` 中移除对应的文件对象即可。 ```javascript methods: { removeFileManually(index) { const fileList = this.$refs.upload.internalInstance.fileList; if (index >= 0 && index < fileList.length) { fileList.splice(index, 1); // 移除指定索引位置的文件 } } } ``` 上述代码片段展示了如何通过索引来定位并移除目标文件[^1]。 #### 方法二：调用自定义接口完成服务器端删除 除了前端逻辑上的移除外，还需要考虑实际业务场景下可能涉及的服务端数据清理工作。此时可结合服务端 API 完成彻底删除的操作流程如下所示： 1. **触发删除请求** 使用 Vue.js 或其他框架发起 HTTP 请求至后台服务地址执行物理层面的数据销毁任务； 2. **同步更新视图状态** 待收到成功响应后再调整本地存储结构使之反映最新变化情况； 下面是一个完整的例子说明这一过程: ```vue <template> <div> <!-- 自定义上传 --> <el-upload ref="upload" :action="uploadUrl" :on-success="handleSuccess" :before-remove="beforeRemove"> </el-upload> <!-- 手动删除按钮 --> <button @click="deleteUploadedFiles">Delete All Files</button> </div> </template> <script> export default { data() { return { uploadUrl: '/api/upload', uploadedFiles: [] }; }, methods: { async deleteUploadedFiles() { try { await Promise.all(this.uploadedFiles.map(async file => { const response = await fetch(`/api/delete/${encodeURIComponent(file.name)}`, { method: 'DELETE' }); if (!response.ok) throw new Error(`Failed to delete ${file.name}`); })); // 清空文件列表 this.$refs.upload.clearFiles(); this.uploadedFiles = []; } catch(error){ console.error('Error during deletion:', error); } }, handleSuccess(response, file, fileList) { this.uploadedFiles.push({ name: file.name }); // 记录已上传文件名称以便后续批量删除 }, beforeRemove(file, fileList) { this.$message.warning('This action will not be allowed.'); return false; // 防止默认行为发生 } } }; </script> ``` 此段脚本实现了两个主要功能——一是允许开发者自行决定何时以及怎样清除所有先前提交过的资料；二是保留原有机制下的提示信息防止误触造成不可逆后果的同时还能够满足特定需求比如只读模式下的展示效果等等[^2]。 另外值得注意的是，在某些情况下我们也许希望隐藏掉原有的图标链接而仅仅依靠外部控件来进行管理那么就可以按照之前提到的方式借助 CSS 样式表达到目的即设置`.class_file /deep/ .el-upload-list__item .el-icon-close{display:none!important}`从而让界面更加简洁明了[^3]。 --- ###