el-upload调用删除接口
时间: 2025-01-29 18:15:01 浏览: 66
### 使用 `el-upload` 组件调用删除接口
当使用 `el-upload` 组件时,可以通过配置 `on-remove` 钩子来触发自定义的删除逻辑。此钩子会在用户尝试从文件列表中移除某个文件时被调用,并接收两个参数:即将被移除的文件对象以及当前剩余的文件列表。
为了实现完整的删除功能,通常还需要向服务器发送请求以永久删除对应的文件资源。下面是一个简单的例子展示如何结合前端操作与后端API完成这一过程:
#### HTML部分
```html
<template>
<div id="app">
<!-- 设置 :file-list 来绑定数据 -->
<el-upload
action="#"
:auto-upload="false"
:on-remove="handleRemove"
:file-list="fileList">
<el-button type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
```
#### JavaScript (Vue.js) 部分
```javascript
<script setup lang="ts">
import { ref } from 'vue';
// 假设这里有一个函数用于发起HTTP DELETE 请求
const deleteFileFromServer = async (filePath: string): Promise<void> => {
try {
await fetch(`/api/delete/${encodeURIComponent(filePath)}`, {
method: "DELETE",
});
console.log('删除成功');
} catch(error){
console.error('删除失败', error);
}
};
let fileList = ref([]); // 存储已选择但未上传的文件信息数组
async function handleRemove(file, fileList) {
const filePath = file.response ? file.response.data.path : null;
if (!filePath || confirm(`确认要删除 ${file.name} 吗?`) === false) return;
await deleteFileFromServer(filePath);
this.fileList = fileList; // 更新本地状态中的文件列表
}
</script>
```
在这个示例中,每当有文件被成功添加到队列之后,都会将其保存至 `fileList` 变量内;而一旦发生移除动作,则会先询问用户是否真的想要继续,再依据具体情况决定要不要真正地去调用远程的服务端删除接口[^2]。
阅读全文
相关推荐


















