惯性反应中文件上传更新错误

Question

所以我尝试创建一个更新文章功能，这是代码：

文章控制器：

public function update(Request $request, Article $article)
    {
        $request->validate([
            'title' => 'required',
            'body' => 'required',
            'thumbnail' => 'nullable|mimes:png,jpg,jpeg',
        ]);

        // If new thumbnail uploaded
        if ($request->hasFile('thumbnail')) {
            $thumbnail = $request->file('thumbnail')->store('thumbnail');

            $article->update([
                'title' => $request->title,
                'body' => $request->body,
                'thumbnail' => $thumbnail
            ]);
        } else {
            // No new thumbnail
            $article->update([
                'title' => $request->title,
                'body' => $request->body,
            ]);
        }

        return redirect('/admin');
    }

这是惯性反应中的视图：

import React, { useState } from "react";
import Navbar from "../components/Navbar";
import { Editor } from "@tinymce/tinymce-react";
import { useForm } from "@inertiajs/inertia-react";

export default function EditArticle({ article }) {
    const { data, setData, patch, errors, reset, processing } = useForm({
        title: article.title,
        body: article.body,
        thumbnail: null
    });

    const [isOpen, setIsOpen] = useState(false);

    function onSubmitEventHandler(e) {
        e.preventDefault();
        patch(`/articles/${article.id}/edit`, { onSuccess: () => reset() });
    }

    function openModalEventHandler() {
        setIsOpen(!isOpen);
    }

    function handleThumbnailChange(e) {
        setData('thumbnail', e.target.files[0]);
    }

    return (
        <>
            <Navbar />
            <form className="mt-24" onSubmit={onSubmitEventHandler} encType="multipart/form-data">
                {
                    isOpen &&
                    <>
                        <div className="fixed inset-0 flex items-center justify-center z-40">
                            <div className="p-4 rounded-lg flex flex-col bg-white text-black z-50 relative">
                                <div onClick={openModalEventHandler} className="hover:cursor-pointer absolute -top-2 -right-2 shadow-md p-2 bg-white  rounded-full">
                                    <img src="/icon/closeIcon.svg" className="w-4" alt="Close Icon" />
                                </div>
                                <h2 className="text-2xl font-semibold">Edit Article</h2>
                                <label htmlFor="title" className="mt-5 text-sm">Title:</label>
                                <input type="text" id="title" className="rounded-lg border py-2 px-3" value={data.title} onChange={(e) => setData('title', e.target.value)} />

                                <label htmlFor="thumbnail" className="mt-5 text-sm">Thumbnail:</label>
                                <input type="file" className="mt-2" id="thumbnail" onChange={handleThumbnailChange} />

                                <button type="submit" disabled={processing} className={`mt-4 py-2 px-4 bg-darkerBlue rounded-lg text-white ${processing && 'opacity-25'}`}>Save Article</button>
                                {errors.title &&
                                    <p className="mt-2 text-sm text-red-700">{errors.title}</p>
                                }
                                {errors.body &&
                                    <p className="mt-2 text-sm text-red-700">{errors.body}</p>
                                }
                                {errors.thumbnail &&
                                    <p className="mt-2 text-sm text-red-700">{errors.thumbnail}</p>
                                }
                            </div>
                            <div onClick={openModalEventHandler} className="fixed inset-0 bg-black opacity-35"></div>
                        </div>
                    </>
                }
                <Editor
                    apiKey='5d3gmavobfl1gplfh7eithg9chuj3shiru72msgp1kescjzi'
                    init={{
                        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | table  | addcomment showcomments |  align lineheight | checklist numlist bullist indent outdent |  charmap | removeformat',
                        height: 520,
                    }}
                    value={data.body}
                    onEditorChange={(newValue, editor) => setData('body', newValue)}
                />

                <div onClick={openModalEventHandler} className="hover:bg-gray-200 hover:cursor-pointer bg-white transition fixed right-3 bottom-5 rounded-full p-4 card-shadow">
                    Save
                </div>
            </form>
        </>
    )
}

当我只编辑标题或正文字段时，没有错误..

但是当我尝试上传文件并提交表单时出现错误：

标题字段为必填项。 正文字段为必填项。

即使我已经填写了标题和正文字段。

Answer 1

已更新

由于本机不支持使用多部分/表单数据请求上传文件，因此您必须使用

POST

请求而不是

PATCH

或

PUT

。

或者你可以尝试方法欺骗：

 useForm({
        title: article.title,
        body: article.body,
        thumbnail: null,
         _method: "patch" // Add _method to payload
    });
 post(`/articles/${article.id}/edit`, {
 onSuccess: () => reset()
})

或者您可以使用路由器：

import { router } from '@inertiajs/react'

 router.post('/articles/${article.id}/edit', {
                ...data,
                _method: "patch",
            });

你查看官方文档：