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

// 前端（Vue.js）部分
<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

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

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

// 后端（Laravel）部分
Route::post('/upload', 'UploadController@upload');

class UploadController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('file')) {
            $file = $request->file('file');
            $fileName = $file->getClientOriginalName();
            
            // 将文件保存到指定目录
            $file->move(public_path('uploads'), $fileName);
            
            return response()->json(['success' => true, 'message' => '文件上传成功']);
        }
        
        return response()->json(['success' => false, 'message' => '未选择文件']);
    }
}