在vuejs和Laravel中传递上传的文件照片的值

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    submitFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('File uploaded successfully:', response.data);
      }).catch(error => {
        console.error('There was an error uploading the file:', error);
      });
    }
  }
};
</script>

// routes/api.php
Route::post('/upload', [FileUploadController::class, 'upload']);

// FileUploadController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('file')) {
            $file = $request->file('file');
            $filename = time() . '.' . $file->getClientOriginalExtension();
            $file->move(public_path('uploads'), $filename);

            return response()->json(['message' => 'File uploaded successfully', 'filename' => $filename]);
        }

        return response()->json(['error' => 'No file uploaded'], 400);
    }
}