在
Vue中
关闭弹窗时手动删除
el-upload已
上传的
文件，并
清空上传文件列表，可以使用以下步骤：
1. 在
关闭弹窗前记录已
上传的
文件信息，包括
文件名、
文件地址等。
2. 在
关闭弹窗时，手动删除已
上传的
文件。可以通过发起AJAX请求将
文件从服务器上删除，或者通过发送D
ELETE请求将
文件从
el-upload
组件的
文件列表中删除。
3.
清空上传文件列表。可以通过设置
el-upload
组件的
文件列表为空数组来
清空上传文件列表。
下面是一个示例代码，实现了在
关闭弹窗时手动删除
el-upload已
上传的
文件，并
清空上传文件列表的功能：
```
<template>
<
el-dialog :visible.sync="dialogVisible" title="
上传文件">
<
el-upload
ref="upload"
class="upload-demo"
:action="uploadUrl"
:on-success="handleUploadSuccess"
:file-list="fil
eList"
:auto-upload="false"
:show-file-list="true"
>
<
el-button slot="trigger" type="primary">选取
文件</
el-button>
<
el-button slot="append" type="primary" @click="handleUpload">
上传</
el-button>
</
el-upload>
<div slot="footer" class="dialog-footer">
<
el-button @click="dialogVisible = false">取 消</
el-button>
<
el-button type="primary" @click="handleClose">确 定</
el-button>
</div>
</
el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
fil
eList: [],
uploadedFiles: []
};
},
methods: {
handleUploadSuccess(response, file, fil
eList) {
let uploadedFile = { name: file.name, url: response.url };
this.uploadedFiles.push(uploadedFile);
},
handleUpload() {
this.$refs.upload.submit();
},
handleClose() {
// 手动删除已
上传的
文件
this.uploadedFiles.forEach(file => {
this.$http.d
elete(file.url).then(() => {
console.log('
文件删除成功');
}).catch(() => {
console.log('
文件删除失败');
});
});
//
清空上传文件列表
this.fil
eList = [];
this.uploadedFiles = [];
this.dialogVisible = false;
}
}
};
</script>
```
在上述示例代码中，我们通过定义一个`uploadedFiles`数组来记录已
上传的
文件信息。在
上传成功回调函数中，将
上传的
文件信息添加到`uploadedFiles`数组中。
在
关闭弹窗时，我们遍历`uploadedFiles`数组，通过发送D
ELETE请求将
文件从服务器上删除。然后，我们通过将`fil
eList`和`uploadedFiles`数组都
清空来
清空上传文件列表。最后，
关闭弹窗。
8208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
