如何把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 '';
    }