Question

我正在开发我的第一个基于Laravel的Webapp。我需要上传一些文件，因此我决定使用FilePond JavaScript库。我尝试在documentation之后通过npm在我的项目中安装，所以我做了npm i filepond --save安装主库，并重复了一些插件...要使用该库，文档说要与{{1}一起导入但是我必须在哪里写这些导入？我用import * as FilePond from 'filepond';写的，但是没用...

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

Answer 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

Answer 2

FilePond作为包装在UMD中的模块公开。可以将其添加到 CDN或通过添加文件使用Node Package Manager进行项目手动。

从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>

Answer 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，如何？

3 个答案:

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