使用 Alpine js 上传文件后刷新表格

【问题标题】：Refresh a table after upload file with Alpine js使用 Alpine js 上传文件后刷新表格
【发布时间】：2022-02-20 19:50:48
【问题描述】：

我正在开发一个 Laravel 应用程序，并且我有一个视图，可以在表格中显示文件数据。当我通过 Filepond 输入类型文件上传文件时，我希望使用 Alpine js 刷新视图以显示新上传的文件。我该怎么办？

This 是视图

this 是我使用 Alpine 和 Filepond 的主要 .js 文件

【问题讨论】：

您好 FilePond 开发者，我还没有任何使用 Alpine 的经验，但是您可以使用 onprocessfile 回调来检测文件何时上传成功。

标签： laravel alpine.js filepond

【解决方案1】：

根据 Rik 的回答，我认为最简单的集成方法是将文件信息存储到 FilePond 上传的 Alpine.js 状态帖子中。

Alpine.store('fileInfo', {
  loading: false,
  file: null,
  setFileInfo(file) {
    this.file = file;
  }
});

// Alpine initialisation code

// onreadystatechanged wrapper etc

FilePond.create(element, {
  // other config
  process: {
    // other config
    onprocessfile: (error, file) => {
      Alpine.store('fileInfo').setFileInfo(file);
    }
  }
})

在您的模板或 Alpine 组件中，您可以分别执行 $store.fileInfo.file 或 this.$store.fileInfo.file。

这里是Alpine.store 的文档：https://alpinejs.dev/globals/alpine-store

【讨论】：