Element Plusのel-uploadにてアップロードするファイルとは別にパラメーターを付属させるやり方

概要

Element Plusのel-uploadを使用していますが、ファイルアップロード時におまけでパラメータを付属させてサブミットする方法でハマったので、備忘録として残しておきます。

テンプレート側

<el-upload
    ref="upload"
    :data = {option:additionalOptions}
    :auto-upload="false"
    :file-list="fileList"
    :headers="updateHeaders"
    :limit="1"
    :on-change="handleChange"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :show-file-list="false"
    action="api/hoge/fuga"
    drag>

...省略...

</el-upload>

...省略...

<el-button
    @click="submitUpload"
>
</el-button>

ポイントは「:data = {option:additionalOptions}」の部分です。

• optionのところはパラメーターのkeyとなる文字列です。好きな名前で定義してくだい。
• additionalOptionsは変数名なので名前はなんでもいいです。

処理側

const upload = ref()
let additionalOptions = ref('')

const submitUpload = () => {
  additionalOptions.value = "FooBar"
  upload.value.submit()
}

とすると、サブミットされた先のサーバーサイドで（※例えばRailsの場合）

params['option']

のように参照すると

"FooBar"

といった形で設定した値を取得することができる。