如何在Laravel中使用Vuejs和vuetify上传文件和数据

Route::post('/upload', 'UploadController@upload');

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function upload(Request $request)
    {
        // 处理文件上传逻辑
        if ($request->hasFile('file')) {
            $file = $request->file('file');
            // 保存文件到指定目录
            $path = $file->store('uploads');
        }

        // 处理数据保存逻辑
        $data = $request->input('data');
        // 保存数据到数据库或其他存储介质

        return response()->json([
            'message' => '上传成功',
            'path' => $path, // 返回文件保存路径
            'data' => $data, // 返回保存的数据
        ]);
    }
}

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <v-btn @click="submit">提交</v-btn>
  </div>
</template>

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

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
          // 处理上传成功后的逻辑
        })
        .catch(error => {
          console.error(error);
          // 处理上传失败后的逻辑
        });
    },
  },
};
</script>

<template>
  <div>
    <upload-component></upload-component>
  </div>
</template>

<script>
import UploadComponent from './UploadComponent.vue';

export default {
  components: {
    UploadComponent,
  },
};
</script>