在 Laravel 项目中安装 FilePond，如何？

Question

我正在开发我的第一个基于 Laravel 的 web 应用程序。我需要上传一些文件，所以我决定使用FilePond JavaScript 库。我尝试按照文档通过 npm 安装在我的项目中，所以我npm i filepond --save安装了主库并重复了一些插件......要使用文档说要导入的库，import * as FilePond from 'filepond';但我必须在哪里编写这些导入？我写了/resources/js/app.js但是没用。。。

谁能解释一下如何在 Laravel 6 项目中正确插入 FilePond？

Answer 1

要在 Laravel 中安装 FilePond，请执行以下操作

在/resources/js/app.js导入中并将其分配给全局window对象，如下所示：

import * as FilePond from 'filepond';

window.FilePond = FilePond;

导入样式/resources/css/main.css：

@import "~filepond/dist/filepond.min.css";

现在，您可以在刀片文件中的任何位置轻松获取FilePond实例。

AlpineJs在刀片文件中使用的示例。

<div x-data x-init="FilePond.create($refs.input);">
    <input type="file" x-ref="input">
</div>