PrimeVue FileUpload文件过大错误捕获及自定义Toast提示问题

针对PrimeVue 4.0.4版本的FileUpload组件，在basic模式下无法通过@error事件捕获文件大小超限问题的情况，可通过以下方案实现自定义荷兰语Toast提示：

核心原因 #

PrimeVue 4.x的FileUpload在basic模式下，文件大小校验逻辑默认在组件内部完成，不会触发@error事件（该事件主要用于捕获上传阶段的网络类错误），因此需要手动在文件选择阶段做校验。

解决方案步骤 #

1. 关闭组件默认错误提示：添加showErrorToast="false"属性，禁用组件自带的英文错误弹窗
2. 在@select事件中手动校验文件大小：获取选中的文件，判断是否超过设定的maxFileSize阈值
3. 调用自定义Toast提示：使用PrimeVue的Toast组件，展示荷兰语的文件过大提示

完整代码示例 #

模板部分 #

<template>
  <div>
    <FileUpload 
      chooseLabel="Selecteer foto" 
      mode="basic" 
      @select="onFileSelect" 
      customUpload 
      accept="image/*" 
      :maxFileSize="1000000"
      severity="secondary" 
      :multiple="false"
      :showErrorToast="false" <!-- 关闭默认错误提示 -->
    />
    <Toast />
  </div>
</template>

脚本部分 #

<script setup>
import { useToast } from 'primevue/usetoast';

const toast = useToast();

const onFileSelect = (event) => {
  const file = event.files[0];
  const maxSize = 1000000; // 1MB，和组件的maxFileSize保持一致

  // 校验文件大小
  if (file.size > maxSize) {
    // 展示荷兰语自定义提示
    toast.add({
      severity: 'error',
      summary: 'Fout bij upload',
      detail: 'Bestand is te groot. Maximaal 1MB toegestaan.',
      life: 5000
    });
    // 阻止后续上传逻辑（如果有）
    return;
  }

  // 这里写正常的文件处理/上传逻辑
  console.log('文件符合要求:', file);
};
</script>

额外说明 #

• 确保项目中已正确注册Toast组件（可通过全局注册或局部导入的方式）
• maxFileSize的值要和校验逻辑中的值保持一致，避免出现校验不一致的情况
• 如果需要处理其他类型的错误（如文件格式不符），也可以在onFileSelect事件中添加对应的校验逻辑

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