【Vue】filepond Postパラメータ渡し方

はじめに

filepondというライブラリを使用してファイルアップロード機能を実装していたが、postパラメータをサーバー側に渡すところで少し躓いたのでメモ。

環境

vue@2.6.11
vue-cli 2.9.6 Laravel Framework 6.5.0
filepond@4.9.5

やったこと

filepond インストール

filepondの導入と基本的な使い方はいろいろと記事があるので割愛。
参考にさせて頂いたサイト
pqina.nl

reffect.co.jp

File metadata プラグインインストール

公式ページのFile metadataの項目を参考にしてインストール

npm i filepond-plugin-file-metadata --save

vueファイル　ユーザーＩＤをPostで送る

<template>
        <file-pond
          :server="url"
          allowRevert="false"
          instantUpload="false"
        />
</template>
<script>
import vueFilePond, { setOptions } from "vue-filepond";
import "filepond/dist/filepond.min.css";
/* Plugin */
import FilePondPluginFileMetadata from "filepond-plugin-file-metadata";
const FilePond = vueFilePond(
  FilePondPluginFileMetadata
);

export default {
  components: { FilePond },
  data() {
    return {
      url: "http://localhost:8000/api/fileupload",
      userId: 1,
    }
 },  
  /** 中略 */
  mounted() {
    //ここでパラメータをセット
    setOptions({
      fileMetadataObject: {
        userId: this.userId
      }
    });
  }
    ...

サーバー側（php)

use Illuminate\Http\Request;

    public function postFileUpload(Request $request)
    {
        $input = json_decode($request->input('filepond'));
        //ユーザーID取得
        $userId = $input->userId;

        //なんらかの処理
    }

終わりに

とりあえず動くが、ファイルのメタデータとしてデータを渡している？のは違和感がある。良い方法があれば教えていただければうれすぃ

まさなみブログ

主にweb系開発の記事を適当に書いてます。