如何在Laravel项目中安装FilePond？
我正在开发我的第一个基于Laravel的webapp应用程序。我需要上传一些文件，所以我决定使用FilePond JavaScript库。我试图通过npm按照documentation在我的项目中安装，所以我做了npm i filepond --save来安装主库，并重复了一些插件。为了使用库，文档说要使用import * as FilePond from 'filepond';导入，但是我必须在哪里编写这些导入？我用/resources/js/app.js写的，但是它不能工作...
有人能解释一下如何在Laravel6项目中正确插入FilePond吗？
回答 3
Stack Overflow用户
发布于 2020-09-09 13:04:45
要在Laravel中安装FilePond，请执行以下操作
导入/resources/js/app.js window中的对象并将其分配给全局/resources/js/app.js对象，如下所示：
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>Stack Overflow用户
发布于 2020-01-28 23:38:14
在/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
Stack Overflow用户
发布于 2020-01-28 23:45:23
FilePond作为封装在UMD中的模块公开。可以使用Node Package Manager，从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>https://stackoverflow.com/questions/59951952
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号