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

Question

我正在开发我的第一个基于 Laravel 的网络应用程序。我需要上传一些文件所以我决定使用 FilePond JavaScript 库。我尝试在 documentation 之后通过 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";

现在，在 Blade 文件的任何位置，您都可以简单地获取 FilePond 实例。

在 Blade 文件中使用 AlpineJs 的示例。

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