Element Plus的Upload上传文件列表异步删除记录

el-upload file-list 异步删除 记录

template

<template>
  <el-upload
    :file-list="uploadFileList"
    class="upload-demo"
    action="/upload"
    :data="uploadData"
    :multiple="true"
    :limit="2"
    :before-remove="beforeRemove"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :auto-upload="true"
  >
    <el-button type="primary">上传文件</el-button>
  </el-upload>
</template>

script setup lang=“ts”

const uploadData = ref({});
const uploadFileList = ref<UploadUserFile[]>([
  {name: 'test1.txt', url: '/download/test1.txt'},
  {name: 'test2.txt', url: '/download/test2.txt'},
  {name: 'test3.txt', url: '/download/test3.txt'},
  {name: 'test4.txt', url: '/download/test4.txt'},
]);
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`是否删除已上传文件 ${uploadFile.name} ？`).then(
      () => {
        return new Promise((resolve, reject) => {
          // deleteFile
          // export const deleteFile = async (fileId) => {
          //   return await req.post('/filePel/remove', {fileId: fileId});
          // }
          //
          deleteFile(uploadFile.id).then((res) => {
            (res.code === 0) ? resolve(true) : reject(res.msg);
          }).catch((error, a) => {
            reject(error);
          });
        }).catch(err => {
          ElMessageBox.alert(err);
          return false;
        });
      },
      () => false
  )
}
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log('文件已移除', file, uploadFiles);
}