PrimeVue FileUpload - 处理服务器上传错误

Question

上传文件时，服务器可能会返回错误。 我可以通过事件访问错误

error

:

@error="onUploadError"

但是，我无法操作文件列表以将其从预览中删除。 这是访问上传者状态的方法吗？

Answer 1

您无法直接修改

FileUpload

组件，但通过将其定义为

ref

，您可以通过调用内部 API 函数来清除它：

clear()

。

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const fileUploader = ref(null);
    
    const onUploadError = (event) => {
      console.error("Upload Error");

      // Access the FileUpload component via ref and clear the file list
      if (fileUploader.value) {
        fileUploader.value.clear();
      }
    }

    return {
      fileUploader,
      onUploadError,
    };
  },
});

app.use(PrimeVue.Config, {
  theme: {
      preset: PrimeVue.Themes.Aura
  }
});

app.component('p-fileupload', PrimeVue.FileUpload);

app.mount('#app');

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

<div id="app">
  <p-fileupload
    ref="fileUploader"
    url="/nonexistent-url-error-simulation"
    @error="onUploadError"
    :auto="true"
  />
</div>