PrimeVue FileUpload上传失败仍显示“Completed”问题求助

方案一：在自动上传模式下手动修正文件状态 #

适合不想大幅改动现有代码的场景，通过修改上传事件中文件的status属性纠正组件显示：

1. 给FileUpload组件添加ref属性（可选，用于更稳妥地访问组件实例）

<FileUpload
  name="demo[]"
  :fileLimit="1"
  url="/api/image"
  @upload="uploadImage"
  :multiple="false"
  accept="image/*"
  :maxFileSize="1000000"
  ref="fileUpload"
/>

2. 修改uploadImage函数，在上传失败时设置文件状态为error并添加错误提示：

const fileUpload = ref(null);

const uploadImage = async (event) => {
  try {
    const response = event.xhr;
    const targetFile = event.files[0]; // 获取当前上传的文件对象

    if (response.status === 200) {
      // 处理上传成功逻辑
      targetFile.status = 'success'; // 可选，组件默认会设置，但明确设置更可靠
    } else {
      // 标记上传失败
      targetFile.status = 'error';
      targetFile.message = `上传失败，服务器返回状态码：${response.status}`;
    }
  } catch (error) {
    console.error('上传处理出错:', error);
    const targetFile = event.files[0];
    // 处理网络等异常情况
    targetFile.status = 'error';
    targetFile.message = '网络异常，上传失败';
  }
};

方案二：使用自定义上传模式（推荐） #

完全手动控制上传流程，彻底避免组件自动状态判断的问题：

1. 修改组件配置，关闭自动上传，绑定文件选择和手动上传事件：

<FileUpload
  name="demo[]"
  :fileLimit="1"
  :auto="false" <!-- 关闭自动上传，由开发者控制上传时机 -->
  @select="onFileSelected" <!-- 文件选择完成时触发 -->
  @upload="triggerUpload" <!-- 点击组件上传按钮时触发 -->
  :multiple="false"
  accept="image/*"
  :maxFileSize="1000000"
  ref="fileUpload"
/>

2. 编写对应的处理函数：

const fileUpload = ref(null);
let currentFile = null;

// 保存选择的文件
const onFileSelected = (event) => {
  currentFile = event.files[0];
};

// 手动触发上传
const triggerUpload = async () => {
  if (!currentFile) return;

  // 标记文件为上传中
  currentFile.status = 'uploading';

  try {
    // 构建FormData
    const formData = new FormData();
    formData.append('demo[]', currentFile);

    // 发起上传请求
    const response = await fetch('/api/image', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      // 上传成功
      currentFile.status = 'success';
      // 添加你的成功处理逻辑，比如更新数据、提示用户等
    } else {
      // 上传失败（服务器返回错误状态码）
      currentFile.status = 'error';
      currentFile.message = `上传失败：${response.statusText}`;
    }
  } catch (error) {
    // 处理网络错误等异常
    currentFile.status = 'error';
    currentFile.message = '网络连接异常，上传失败';
    console.error('上传出错:', error);
  }
};

原理说明 #

PrimeVue的FileUpload在默认自动上传模式下，只要XHR请求完成（不管响应状态码是否为成功），就会将文件状态标记为success（显示Completed）。通过手动修改文件的status属性为error，组件会自动切换到错误状态显示；而自定义上传模式则完全由开发者控制每个阶段的状态，能更精准地匹配实际上传结果。

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