JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <b-form-file v-model="files" multiple plain></b-form-file>
  <ul>
  <li v-for="file in files">
    {{ file.name }}
  </li>
  </ul>
  <b-button v-on:click="onSubmit">
    Submit
  </b-button>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        files: []
      }
    },
    methods: {
      onSubmit() {
        // Process each file
        this.files.forEach(thisFile => {
          console.log("Submitting "+thisFile.name) 
        
          // Post file to backend
          const formBody = new FormData()
          formBody.set("formParameter", thisFile)
          fetch(
            "https://httpbin.org/post",{
              method: 'POST',
            	body: formBody})
          	.then(response => console.log(response))
        }) 
      }
    }
  })
}