无法用InertiaJS、React和Laravel上传图像

Question

工作非常简单:以postTitle、postBody和postImage作为输入，并在数据库中更新它们。但是我在上传图片时遇到了困难，希望有人能帮我。我用的是InertiaJ，React和Laravel。

我的EditPost.jsx文件：

import {React, useState, useEffect} from 'react'
import Layout from '../Shared/Layout'
import { useForm } from '@inertiajs/inertia-react'

function EditPost({errors, postId, postTitle, postBody, postImage}) {
    const { data, setData, put, progress } = useForm({
        postTitle: postTitle,
        postBody: postBody,
        postImage: null
    })

    const onSubmitHandler = (e) => {
        e.preventDefault()
        put('/posts/update/' + postId)
    }

    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <br/>
                    <br/>
                    <h3 className="text-center">Edit the post</h3>
                    <form onSubmit={onSubmitHandler}>
                        <div className="mb-3">
                            <label htmlFor="postTitle" className="form-label">Post title</label>
                            <input value={data.postTitle} onChange={e => setData('postTitle', e.target.value)} type="text" className="form-control" id="postTitle" placeholder="Enter post title here..." />
                            {errors.postTitle && <p className="text-danger">{errors.postTitle}</p>}
                        </div>
                        <div className="mb-3">
                            <label htmlFor="postBody" className="form-label">Post body</label>
                            <input value={data.postBody} onChange={e => setData('postBody', e.target.value)} type="text" className="form-control" id="postBody" placeholder="Enter post body here..." />
                            {errors.postBody && <p className="text-danger">{errors.postBody}</p>}
                        </div>
                        <div className="mb-3">
                            <label htmlFor="postImage" className="form-label">Post body</label>
                            <input type="file" className="form-control" id="postImage" value={data.postImage} onChange={e => setData('postImage', e.target.files[0])}  />
                            {errors.postImage && <p className="text-danger">{errors.postImage}</p>}
                        </div>
                        {progress && (
                            <progress value={progress.percentage} max="100">{progress.percentage}%
                        </progress>
                        )}
                        <br/>
                        <button className="btn btn-success rounded">Submit</button>
                    </form>
                </div>
            </div>
        </div>    
    )
}

EditPost.layout = page => <Layout pageTitle={'Edit the Post'} children={page}/>

export default EditPost

我正在跟踪InertiaJS文档，但是在控制台中得到了这个警告：

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    [.......]

如果忽略错误并选择file，则会得到以下错误：

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

react_devtools_backend.js:2556 Warning: A component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

请帮帮我..。

Answer 1

尝试使用POST而不是PUT，否则您将需要欺骗该方法。

另外，如果您使用的惯性版本低于0.8.0，则需要将信息作为FormData对象传递。

在某些语言中，不支持使用多部分/表单数据请求上传文件的put、patch或delete方法。这里的解决方法是简单地使用post上传文件。

查看惰性文件上传这里的页面，其中有一个React示例。