Laravel+Inertia+Vue提交表单出现404 Not Found问题求助

使用Laravel、Inertia和Vue开发时，提交备件表单页面弹出404 not found提示，控制台报错：POST http://127.0.0.1:8000/admin/sparepart 404 (Not Found)，无法确定是路由配置错误还是表单数据未正确发送到后端。

网络请求头信息 #

Request URL:
http://127.0.0.1:8000/admin/sparepart
Request Method:
POST
Status Code:
404 Not Found
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin

请求Payload #

Payload中的FormData已正确包含数据：

nama_sparepart: as
harga: 2
stok: 2
kategori_id: 1
image: (binary)

路由配置 #

使用Route::resource配置路由：

Route::resource('/admin/sparepart', SparepartController::class);

执行php artisan route:list时，该POST路由确实存在：

GET|HEAD admin/sparepart ....................................... sparepart.index › SparepartController@index
POST admin/sparepart ....................................... sparepart.store › SparepartController@store

控制器代码（store方法） #

public function store(Request $request){
    $request->validate([
        'nama_sparepart' => 'required|string|max: 25',
        'harga' => 'required|number',
        'stok' => 'required|number',
        'image' => 'required|image',
        'kategori_id' => 'required',
    ]);

    $image = $request->file('image');
    $image->storeAs('public/spareparts', $image->hashname());

    $sparepart = Sparepart::create([
        'nama_sparepart' => $request->nama_sparepart,
        'harga' => $request->harga,
        'stok' => $request->stok,
        'image' => $image->hashName(),
        'kategori_id' => $request->kategori_id,
    ]);

    if($sparepart){
        return Redirect::route('sparepart.index')->with('message', 'success');
    }
}

Vue组件脚本 #

<script setup>
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'

// props
defineProps({
    errors: Object,
    kategori: Array
})

// state posts
const sparepart = reactive({
    nama_sparepart  : '',
    harga           : '',
    stok            : '',
    image           : null,
    kategori_id     : ''
})

function handleImageUpload(event) {
    const file = event.target.files[0]
     console.log("File yang dipilih:", file);
    if (file) {
        sparepart.image = file // Simpan file ke state
    }
}

// function storePost
function storePost() {
    console.log("State sebelum dikirim:", sparepart);
    const formData = new FormData()
    formData.append('nama_sparepart', sparepart.nama_sparepart)
    formData.append('harga', sparepart.harga)
    formData.append('stok', sparepart.stok)
    formData.append('kategori_id', sparepart.kategori_id)
    if (sparepart.image) {
        formData.append('image', sparepart.image) // Sertakan file gambar
    }

    // Debugging FormData
    for (let [key, value] of formData.entries()) {
        console.log(key + ': ' + value);
    }

    // Kirim data dengan FormData
    Inertia.post('/admin/sparepart', formData)
}
</script>

Vue组件模板 #

<template>
    <div>
        <div class="card border-0 rounded shadow">
            <div class="card-body">
                <h4>TAMBAH POST</h4>
                <hr>
                <form @submit.prevent="storePost" enctype="multipart/form-data">

                    <div>
                        <label for="image">Gambar</label>
                        <input type="file" id="image" @change="handleImageUpload" accept="image/*" />
                        <span v-if="errors.image">{{ errors.image }}</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Nama Sparepart</label>
                        <input type="text" class="form-control" v-model="sparepart.nama_sparepart" placeholder="Masukkan Title Post">
                        <div v-if="errors.nama_sparepart" class="mt-2 alert alert-danger">
                            {{ errors.nama_sparepart }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Harga</label>
                        <input type="number" class="form-control" v-model="sparepart.harga" placeholder="Masukkan Title Post">
                        <div v-if="errors.harga" class="mt-2 alert alert-danger">
                            {{ errors.harga }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Stok</label>
                        <input type="number" class="form-control" v-model="sparepart.stok" placeholder="Masukkan Title Post">
                        <div v-if="errors.stok" class="mt-2 alert alert-danger">
                            {{ errors.stok }}
                        </div>
                    </div>

                    <div>
                        <label for="kategori_id">Kategori</label>
                        <select v-model="sparepart.kategori_id" id="kategori_id">
                            <option value="">Pilih Kategori</option>
                            <option v-for="k in kategori" :key="k.id" :value="k.id">{{ k.nama_kategori }}</option>
                        </select>
                        <span v-if="errors.kategori_id">{{ errors.kategori_id }}</span>
                    </div>

                    <!-- Tombol Submit -->
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</template>

已尝试的解决操作 #

手动添加独立POST路由（如Route::post('/admin/sparepart', [SparepartController::class, 'store']);），但仍然出现404错误。

内容的提问来源于stack exchange，提问作者Akmp