PrimeVue FileUpload：处理服务器上传错误及文件列表操作问题

• 给FileUpload组件绑定ref，通过组件实例直接操作文件列表：

  <FileUpload ref="fileUploadRef" @error="onUploadError" />
  

  回调中获取实例并删除出错文件：

  // Vue2 写法
  const onUploadError = (event) => {
    const uploader = this.$refs.fileUploadRef;
    const errorIndex = uploader.files.findIndex(file => file === event.file);
    if (errorIndex !== -1) {
      uploader.files.splice(errorIndex, 1);
      uploader.$forceUpdate();
    }
  };
  
  // Vue3 Composition API 写法
  import { ref } from 'vue';
  const fileUploadRef = ref(null);
  const onUploadError = (event) => {
    const uploader = fileUploadRef.value;
    const errorIndex = uploader.files.findIndex(file => file === event.file);
    if (errorIndex !== -1) {
      uploader.files.splice(errorIndex, 1);
    }
  };
  

• 也可以用双向绑定控制文件列表，更灵活：

  <FileUpload v-model:files="uploadFiles" @error="onUploadError" />
  

  直接过滤掉出错文件：

  // Vue2 写法
  data() {
    return { uploadFiles: [] };
  },
  const onUploadError = (event) => {
    this.uploadFiles = this.uploadFiles.filter(file => file !== event.file);
  };
  
  // Vue3 Composition API 写法
  const uploadFiles = ref([]);
  const onUploadError = (event) => {
    uploadFiles.value = uploadFiles.value.filter(file => file !== event.file);
  };
  

不同PrimeVue版本的细节可能略有差异，但核心逻辑都是通过访问组件实例或绑定的文件列表，定位并移除出错的文件项。

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