PrimeVue FileUpload组件：服务端删除失败时恢复已删文件

问题核心：使用PrimeVue的FileUpload组件时，触发删除已上传文件操作后，即使后端删除接口失败，组件仍会移除该文件，需要实现仅当后端删除成功时才移除文件，失败则保留的逻辑。

关键原因 #

@removeUploadedFile事件的默认行为是立即从组件的已上传列表中移除文件，不会等待后端接口的响应结果，所以需要手动干预这个流程。

解决方案步骤 #

1. 阻止默认移除行为：在事件处理函数中调用event.preventDefault()，取消组件自动删除文件的动作；
2. 根据后端响应手动控制文件列表：通过组件的ref实例，操作uploadedFiles数组，仅在后端删除成功时移除对应文件。

修改后的代码实现 #

事件处理函数调整

// 确保已定义组件ref：const fileUpload = ref(null);
const handleRemoveUploadedFileEvent = async (event: FileUploadRemoveUploadedFile) => {
  // 阻止组件默认的文件移除行为
  event.preventDefault();

  state.hasErrors = false;
  state.errorMessage = undefined;
  const response = await fileHandlingService.removeUploadedFile(event.file);

  if (response.didError) {
    state.hasErrors = true;
    state.errorMessage = response.message;
    return; // 删除失败，不做任何文件移除操作
  }

  // 删除成功，手动从组件的已上传列表中移除文件
  if (fileUpload.value) {
    fileUpload.value.uploadedFiles = fileUpload.value.uploadedFiles.filter(
      item => item !== event.file
    );
  }

  // 更新本地存储的文件ID列表
  state.fileIds = state.fileIds.filter((item) => item !== response.model!);
}

模板无需额外修改

保持原有的@removeUploadedFile="handleRemoveUploadedFileEvent"和ref="fileUpload"配置即可。

原理说明 #

• 调用event.preventDefault()后，组件不会自动修改uploadedFiles数组；
• 通过ref获取到FileUpload组件实例后，直接修改其uploadedFiles数组，就能同步更新页面上的已上传文件展示；
• 仅当后端返回删除成功时，才执行文件移除操作，失败则保留文件并展示错误信息。

内容的提问来源于stack exchange，提问作者Okuhle