element-ui 中 如何在el-upload的移除文件列表事件 on-remove 中调用后端进行数据库的删除。

问题描述：

刚开始的时候我设置的是实时上传： auto-upload="true",

:http-request="uploadResource"绑定的这个方法就去后端进行实时上传附件了，这个时候就已经保存到数据库。
那么问题来了：
:on-remove="file => handleRemoveFile(file)"当我用绑定的方法进行调用后端进行删除的时候，应为要获取file.id
虽然我在一开始就在watch方法中在 fileList中追加了id,但是我始终拿不到。（md我也不知道为啥，到现在都没有想明白）

watch(
  () => props.uploadFileList,
  val => {
    console.log("watch执行", val);
    if (val) {
      fileList.value = val.map((el: any) => {
        return {
          id: el.FileId,
          url: serverBaseUrl() + el.Path,
          name: el.Name
        };
      });
    }
  },
  { immediate: true }
);

<template>
  <el-upload
    ref="uploadRef"
    action="no-use"
    :disabled="!disabled"
    list-type="picture-card"
    v-model:file-list="fileList"
    :on-preview="handlePictureCardPreview"
    :on-remove="file => handleRemoveFile(file)"
    :http-request="uploadResource"
    :show-file-list="true"
    :auto-upload="true"
    accept="image/jpg,image/jpeg,image/png"
  >
    <el-icon><Plus /></el-icon>
    <template #tip>
      <div class="el-upload__tip_text-red">*只能上传图片！</div>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

问题解决：

我就就网上查，发现，都没有好的解决方案，还有用name进行删除的，总感觉欠妥。
将实时上传关闭auto-upload="false", 这样就不会存到数据库了，只需要提交表单的时候掉后端往数据库存。
删除的方法没有修改任何地方，id就可以拿到了，神奇了（好吧，我也没有明白啥情况，反正是一脸懵逼）