图像编辑/上传在 Laravel 和 Vue 中不起作用.js

问：

在以编辑形式更新图像时，在 dd（$request->all（）） 上显示空数组，但是当我更新名称、颜色、描述时，它可以正常获取数组中的所有值

我尝试调试但无法找出问题，尝试控制台 .log 我可以创建表单并将其存储在数据库中，但在编辑时，我希望删除图像并使用新图像更改它，但不起作用 因此，当我尝试编辑名称，颜色，描述时，它向我显示包含所有正确数据的数组，但是在图像空数组上输入图像描述，在此屏幕截图中，第一个控制台.log是我只更改名称和第二个控制台时.log当我添加图像时。 这是我的控制器

public function store(Request $request)
    {
        dd($request->all());

        $request->validate([
            'name' => 'required|min:1|max:50',
            'color' => 'required',
            'description' => 'required',
            'image' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Adjust to your needs.
        ]);

        // Handle image upload if a new image is provided
        if ($request->hasFile('image')) {
            $imagePath = $request->file('image')->store('public');
        } else {
            $imagePath = null; // If no image was provided, set it to null.
        }

        $undertone = new Undertone();
        $undertone->name = $request->input('name');
        $undertone->color = $request->input('color');
        $undertone->description = $request->input('description');
        $undertone->image = $imagePath; // Store the image path.

        $undertone->save();

        return redirect()->route('undertones.index')->with('success', 'Undertone was created!');
    }
    /**
     * Display the specified resource.
     */
    public function show(Undertone $undertone)
    {
        return inertia('Undertone/Show', [
            'undertone' => $undertone,
        ]);
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Undertone $undertone)
    {
        return inertia('Undertone/Edit', ['undertone' => $undertone]);
    }
    public function update(Request $request, Undertone $undertone)
    {
        dd($request->all());
        $request->validate([
            'name' => 'required|min:1|max:50',
            'color' => 'required',
            'description' => 'required',
            'image' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Adjust to your needs.
        ]);

        // Handle the image upload if a new image is provided.
        if ($request->hasFile('image')) {
            // Delete the old image if it exists.
            if ($undertone->image) {
                Storage::delete($undertone->image);
            }

            $imagePath = $request->file('image')->store('public');
        } else {
            // If no new image provided, keep the existing image path.
            $imagePath = $undertone->image;
        }

        $undertone->name = $request->input('name');
        $undertone->color = $request->input('color');
        $undertone->description = $request->input('description');
        $undertone->image = $imagePath; // Update the image path.

        $undertone->save();

        return redirect()->route('undertones.index')->with('success', 'Undertone updated successfully');
    }

这是我的edit.vue

<template>
    <form
        @submit.prevent="updateUndertone"
        class="p-4 border rounded-md shadow-sm bg-white dark:bg-gray-800"
        enctype="multipart/form-data"
    >
        <div>
            <div class="mb-4">
                <label
                    for="name"
                    class="text-lg font-semibold text-indigo-600 dark:text-indigo-300"
                    >Name</label
                >
                <input
                    v-model="form.name"
                    type="text"
                    class="w-full border border-gray-200 dark:border-gray-700 p-2 rounded-md"
                />
                <div v-if="form.errors.name" class="text-red-500">
                    {{ form.errors.name }}
                </div>
            </div>
            <div class="mb-4">
                <label
                    for="color"
                    class="text-lg font-semibold text-indigo-600 dark:text-indigo-300"
                    >Color</label
                >
                <input
                    v-model="form.color"
                    type="color"
                    class="ml-4 w-12 h-12"
                />
                <div
                    class="color-preview ml-4"
                    :style="{ backgroundColor: form.color }"
                ></div>
            </div>
            <div class="mb-4">
                <label
                    for="image"
                    class="text-lg font-semibold text-indigo-600 dark:text-indigo-300"
                    >Image</label
                >
                <input
                    type="file"
                    @change="onFileChange"
                    accept="image/*"
                    class="w-full border border-gray-200 dark:border-gray-700 p-2 rounded-md"
                />
                <div v-if="form.errors.image" class="text-red-500">
                    {{ form.errors.image }}
                </div>
                <div v-if="form.image">
                    <p class="mt-2 text-indigo-600 dark:text-indigo-300">
                        Current Image: {{ form.image.name }}
                    </p>
                </div>
            </div>
            <div class="mb-4">
                <label
                    for="description"
                    class="text-lg font-semibold text-indigo-600 dark:text-indigo-300"
                    >Description</label
                >
                <textarea
                    v-model="form.description"
                    class="w-full border border-gray-200 dark:border-gray-700 p-2 rounded-md"
                ></textarea>
                <div v-if="form.errors.description" class="text-red-500">
                    {{ form.errors.description }}
                </div>
            </div>
        </div>
        <div>
            <button type="submit" class="btn-primary">Update</button>
        </div>
    </form>
</template>

<style scoped>
.btn-primary {
    background-color: #4f46e5;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #4338ca;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
}
</style>

<script setup>
import { useForm } from "@inertiajs/vue3";
import { usePage } from "@inertiajs/vue3";

const { props } = usePage();
const form = useForm({
    name: props.undertone.name,
    color: props.undertone.color,
    image: props.undertone.image,
    description: props.undertone.description,
});
const formData = form.data();
const data = new FormData();
Object.keys(formData).forEach((key) => {
    data.append(key, formData[key]);
});
data.append("image", form.image);

const onFileChange = (e) => {
    const file = e.target.files[0];
    form.image = file || null;
};
const updateUndertone = () => {
    const formData = form.data();
    const data = new FormData();
    Object.keys(formData).forEach((key) => {
        data.append(key, formData[key]);
    });
    data.append("image", form.image);
    console.log(formData);
    form.put(`/undertones/${props.undertone.id}`, data, {
        preserveScroll: true,
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
};
</script>