时间戳

首页 > 解决方案 > 在 Laravel 项目中安装 FilePond，如何？

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

问题描述

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

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

标签： javascriptlaravelnpmfile-uploadfilepond

解决方案

要在 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>

推荐阅读