使用 InertiaJS、React 和 Laravel 上传图片时遇到问题

Question

工作很简单：将postTitle、postBody 和postImage 作为输入并更新到数据库中。但是我在上传图片时遇到困难，希望有人能帮助我。我正在使用 InertiaJs、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 documentation 但在控制台中收到此警告：

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

如果忽略错误和 select 文件，我会收到以下错误：

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，否则您将需要欺骗该方法。

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

Uploading files using a multipart/form-data request is not natively supported in some languages for the put, patch or delete methods. The workaround here is to simply upload files using post instead.

查看惯性文件上传页面 here，其中有一个 React 示例。

使用 InertiaJS、React 和 Laravel 上传图片时遇到问题

Trouble uploading image with InertiaJS, React and Laravel

inertiajs

laravel

reactjs