How to send the data type of file from vue to laravel

Question

I want to create a file with data type of vue (3.0.0) and send it to laravel (8.83.7), but when I try to see it with dump() with laravel, it becomes an empty array and I can't see it.

I'm using the element-plus (1.0.2) library in vue

vue

<template>
<el-button class="ml-3" type="success" @click="uploadFile"> アップロード</el-button>
</template>

<script>
export default {
  const uploadFile = () => {
    let list = new DataTransfer();
    let file = new File([ファイル内容(csv)], ファイル名, { type: "text/csv" });
    list.items.add(file);
    const fList = list.files
    fetch("http://127.0.0.1:8002/api/potentials/getcsv", {
        method: "POST",
        body: fList,
      });
  }
}
</script>

laravel

class PotentialsController extends Controller
{
  public function getCSV(Request $request)
    {
        $res = [];
        $status = 200;
        try {
            $body = $request->all();
            dump('body', $body);
            $res = ['items' => $body];
        } catch (\Throwable $th) {
            $status = 500;
            $res['Error'] = [
                'message' => $th->getMessage(),
            ];
        }
        $res['statusCode'] = $status;
        return response()->json($res, $status);
    }
}

what i tried 1.Submit in form

<template>
  <el-button class="ml-3" type="success" @click="uploadFile"> アップロード </el-button>
  <form action="http://127.0.0.1:8002/api/potentials/getcsv" method="post" 
  enctype="multipart/form-data">
    <input style="display: none" ref="upload" type="hidden" name="file"/>
    <input style="display: none" ref="submit" type="submit" />
  </form>
</template>
<script>
const upload = ref(null);
const submit = ref(null);
const uploadFile = () => {
  upload.value.files = fList.value;
  submit.value.click();
}
</script>

I got an error saying that it couldn't change the files in the input.

2.Try it with el-upload of element-plus

<template>
  <el-upload
      ref="upload"
      action="http://127.0.0.1:8002/api/potentials/getcsv"
      :file-list="fList"
      :auto-upload="false"
  ></el-upload>
  <el-button class="ml-3" type="success" @click="uploadFile"> アップロード </el-button>
</template>
<script>
  const upload = ref(null);
  const uploadFile = () => {
    upload.value.submit();
  }
</script>

It seems that this can only be sent after selecting a file like input type = "file".

3.post with axios

<script>
import axios from 'axios';
axios.post('http://127.0.0.1:8002/api/potentials/getcsv',
        fList,
        {headers: {'Content-Type': 'multipart/form-data'}})
        .then(function () {
            console.log('success');
        })
        .catch(function () {
            console.log('error');
        });
</script>

When I saw it with dump with laravel, it was an empty array.

This is what i wanna send

File {name: 'サンプルのCSVファイル (1).csv', lastModified: 1652951754849, lastModifiedDate: Thu May 19 2022 18:15:54 GMT+0900 (日本標準時), 
  webkitRelativePath: '', size: 2938, …}
  lastModified: 1652951754849
  lastModifiedDate: Thu May 19 2022 18:15:54 GMT+0900 (日本標準時) {}
  name: "サンプルのCSVファイル (1).csv"
  size: 2938
  type: "text/csv"
  webkitRelativePath: ""
  [[Prototype]]: File