csrf 対策が非常に面倒臭い。

テスト環境でも、相対パスにしたらいけた

photo.vue

    <el-upload
        v-model:file-list="fileList"
        action="/hoges/test/"//相対パス
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :with-credentials="true"
        :headers="{ 'X-CSRF-TOKEN': csrf }"
    >
        <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

vue.blade.php のヘッダに csrf を書いて
computed で csrf を取得して、一緒に送るって感じ。

element plus の upload 使いたいやんか
https://element-plus.org/en-US/component/upload.html

でも、エラーでるやん

ということで、

vue.blade.php

  <meta name="csrf-token" content="{{ csrf_token() }}">

action にアップロードしたいurlを指定。

photo.vue


<template>

    csrf : {{csrf}}

    <el-upload
        v-model:file-list="fileList"
        action="[https://hoge.com/hoges/test]"
        :headers="{ 'X-CSRF-TOKEN': csrf }"
    >
        <el-icon><Plus /></el-icon>
    </el-upload>

</template>

<script lang="ts" setup>
import { ref , computed , onMounted ,inject } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
])

const csrf = computed(() => document.querySelector('meta[name="csrf-token"]').getAttribute('content'))

</script>

これで、以下の感じでアップロードされる。
引数を”とすると、アップロードファイルはstorage/app直下に保存される


[2023-05-15 08:23:30] local.DEBUG: array (
  'file' => 
  \Illuminate\Http\UploadedFile::__set_state(array(
     'test' => false,

     'originalName' => '00006-3135271734.jpeg',

     'mimeType' => 'image/jpeg',

     'error' => 0,

     'hashName' => NULL,

  )),

)

以上