如何把filepond包含到你的Laravel应用里面

sachu 的个人博客 / 0 / 0 / 创建于 3年前 / 更新于 3年前

filepond 是一个比较受欢迎的前端上传文件用的 JS 插件。它主要有两个应用，第一个是类似于 AJAX 上传文件一样，显示上传进度并进行多文件的拖拽上传，第二个是可以在前端对图片进行长宽和大小的调整，直接用于上传头像的场合，其他的应用大家可以谷歌一下它的官网。我们下面就来谈谈如何把 filepond 整合到 laravel 项目里面的。

用 filepond 的时候当然还是有两种选择，直接包含 CDN 到头部。
第二种是 NPM 安装，我比较倾向于第二种。

npm install filepond

先是载入 css 到 app.scss 里面。我用的 app.scss, Laravel8 默认已经没有了 app.css，但是我想很多人比较喜欢用 sass, 顺便说说我是改的。就是在 webpack.mix.js 里面在修改下：

const tailwindcss =  require('tailwindcss');  /* 这个加在头部 */
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').options({
    postCss:[tailwindcss('./tailwind.config.js')]
}).version();

包含 filepond.min.css 到 app.scss

@import '~filepond/dist/filepond.min.css';

如果在 app.css 里面载入估计不是这个格式。
然后在 resources/js/bootstrap.js 里面：

import * as FilePond from 'filepond';
window.FilePond = FilePond;

然后执行命令：

npm run dev

然后在你所需要的 blade 里面插入 HTML，通常是这样的：

<input type="file" name="file"/>

初始化 filepond：

document.addEventListener('DOMContentLoaded', () => { FilePond.create(document.querySelector('input[name="file"]'));
  FilePond.setOptions({
        server: {
            url: '/upload',
  headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
           }
        }
    });
});

如过没有让 DOM 准备好会不生效，因为我们的 app.js 引入的时候是 defer 的模式。所以一定要有这一句。
这样我们到前端看看是否已经生效，如果生效了是这样的：

这样我们强调一下 csrf 令牌必须要传入，否则就会出现代号为 419 的错误。
下面来看看 laravel 是如何处理的：
首先要加一个路由，做一个控制器：
web.php:

use App\Http\Controllers\UploadController;
Route::post('/upload', [UploadController::class, 'store']);

filepond 要求返回一个字符串，否则就视为不成功：
uploadcontroller.php

public function store(Request $request){
        if($request->hasFile('file')){
            $path = $request->file('file')->store('file');
            return $path;
        }

        return '';
    }