await axios.post('http://localhost:8000/api/files', formData); this.getFiles(); , , ; </script>
// app/Http/Controllers/FileManagerController.php
<script> export default data() return files: [], selectedFile: null, ; , mounted() this.getFiles(); , methods: async getFiles() const response = await axios.get('http://localhost:8000/api/files'); this.files = response.data; , selectFile(event) this.selectedFile = event.target.files[0]; , async uploadFile() const formData = new FormData(); formData.append('file', this.selectedFile);
Define the API routes:
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" php artisan migrate
<template> <div> <h1>File Manager</h1> <ul> <li v-for="file in files" :key="file"> file </li> </ul> <form @submit.prevent="uploadFile"> <input type="file" @change="selectFile" /> <button type="submit">Upload File</button> </form> </div> </template>
public function index() $files = Storage::disk('public')->files(); return response()->json($files);
npm install axios Create a new Vue component for the file manager: