如何把filepond包含到你的Laravel應用裡面

sachu發表於2021-07-31
Laravel

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 '';
    }

大家可以嘗試下是否可以上傳成功。
至於如何再繼續處理檔案和名稱之類的，再繼續進行研究。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章