在 Laravel 项目中安装 FilePond，如何？
Posted
技术标签:
【中文标题】在 Laravel 项目中安装 FilePond，如何？【英文标题】：Install FilePond in a Laravel project, how? 【发布时间】：2020-05-14 01:22:43 【问题描述】：我正在开发我的第一个基于 Laravel 的 web 应用程序。我需要上传一些文件，所以我决定使用FilePond javascript 库。我尝试在documentation 之后通过npm 安装在我的项目中，所以我做了npm i filepond --save 来安装主库并重复了一些插件...要使用该库，文档中说要使用import * as FilePond from 'filepond'; 导入，但是我必须在哪里写这些进口？
我在/resources/js/app.js 写过，但它不起作用...
谁能解释我如何在 Laravel 6 项目中正确插入 FilePond？
【问题讨论】：
能否请您添加您的 webpack.mix.js 文件？ 我解决了这个问题，在我的 /resources/views/layout/app.blade.php （我的主布局文件）中，我在头部有<script src=" asset('js/app.js') " defer></script>，现在移动到 </body> 之前删除延迟。谢谢！
【参考方案1】：
在/resources/js/app.js 我有：
import * as FilePond from 'filepond';
require('./bootstrap');
$(document).ready(function ()
// executes when html-Document is loaded and DOM is ready
console.log("Hi ?");
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);
);
在/resources/sass/app.scss 我有：
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~filepond/dist/filepond.min.css';
在我的welcome.blade.php 中，我只是添加了一个没有实际表单处理的文件输入标签：
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<title> config('app.name', 'Laravel') </title>
<!-- Scripts -->
<script src=" mix('js/app.js') " defer></script>
<!-- Styles -->
<link href=" mix('css/app.css') " rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href=" url('/') ">
config('app.name', 'Laravel')
</a>
</div>
</nav>
<input type="file">
</div>
</body>
</html>
在运行npm run dev 并加载我的演示站点后，我得到了我所期望的。
查看 Laravel Mix 上的文档了解更多详情： https://laravel.com/docs/6.x/mix#working-with-scripts
【讨论】：
我已经完成了所有这些步骤，我包含了从npm run dev...生成的 css 和 js 文件...
我浏览了这些文件，它似乎对我有用。我将使用我在新的 laravel 上使用的详细步骤来更新我的答案。【参考方案2】：
FilePond 被暴露为一个封装在 UMD 中的模块。它可以添加到一个 使用节点包管理器、从 CDN 或通过添加文件的项目 手动。
来自 CDN
<!-- add in <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">
<!--
The classic file input element we'll enhance to a file pond
-->
<input type="file"
class="filepond"
name="filepond"
multiple
data-max-file-size="3MB"
data-max-files="3" />
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
/*
If you want to preview images, you need to register the Image Preview plugin
*/
<script>
FilePond.registerPlugin(
// encodes the file as base64 data
FilePondPluginFileEncode,
// validates the size of the file
FilePondPluginFileValidateSize,
// corrects mobile image orientation
FilePondPluginImageExifOrientation,
// previews dropped images
FilePondPluginImagePreview
);
// Select the file input and use create() to turn it into a pond
FilePond.create(
document.querySelector("input[name='filepond']")
);
</script>
【讨论】：
我知道我可以使用 CDN 获取所需的 JavaScript 和 CSS 文件，但我想使用 npm 和 Laravel Mix 来管理我将在开发过程中使用的所有库和组件...跨度> 【参考方案3】：要在 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>
【讨论】：
以上是关于在 Laravel 项目中安装 FilePond，如何？的主要内容，如果未能解决你的问题，请参考以下文章
在没有 XAMPP 的 Windows 中安装 Laravel
初始安装后在 Laravel Jetstream 中安装 Teams 支持