Post 验证失败：使用 react-hooks-form 时需要路径“...”

Question

我想用 react-hooks-form 上传一个 enctype 为 multipart/formdata 的表单。 req.body 获取表单数据，但 req.data 显示此错误消息："Post validation failed: title: Path title is required., body: Path body is required." 并且未发布表单。如果我像这样发送数据 axios({req.data: dataForm}} req.data 在路径“postImg”

显示此消息 "Post validation failed: postImg: Cast to string failed for value "{ '0': {} }"

之所以使用react-hooks-form上传图片文件到服务器。如果有没有 react-hooks-form 的另一种解决方案，我是开放的。

const AddPost = () => {    
    const { register, handleSubmit } = useForm();
    const onSubmit = async (dataForm) => {
        console.log(dataForm);
        try {
            const res = await axios({ method: 'POST', url: 'http://localhost:5000/posts/addpost', body: dataForm });
            console.log(res);
            //clearInput();
        } catch (err) {
            console.log(err);
        }
    }
    return (
        <>
        <Container>
                <Form /*action="/posts/addpost"*/ onSubmit={handleSubmit(onSubmit)} autoComplete="off" encType="multipart/form-data">
                    <Form.Group>
                        <Row>
                            <Col xs={12} className="text-center mt-2">
                                <Form.Label><h4>Add a Memory</h4></Form.Label>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <Form.Control {...register('title')} required placeholder="Type Title"></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <FontAwesomeIcon icon={faEdit} className="text-dark mx-1"></FontAwesomeIcon>
                                <Form.Label className="mx-1">Details of Memory</Form.Label>
                                <Form.Control {...register('body')} required placeholder="Details" as="textarea" rows={3}></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <FontAwesomeIcon icon={faTag} className="text-dark mx-1"></FontAwesomeIcon>
                                <Form.Label className="mx-1">Tags</Form.Label>
                                <Form.Control {...register('tags')} placeholder="#sunrise etc." required ></Form.Control>
                            </Col>
                            <Col xs={12} md={6} className="my-2 offset-md-3">
                                <Form.Label className="label-file-upload" htmlFor="image-upload">Add Image</Form.Label>
                                <Form.File {...register('postImg')} id="image-upload" required  type="file" />
                            </Col>
                        </Row>
                    </Form.Group>
                    <div className="text-center">
                        <Button type="submit" className="bg-light text-dark border-light form-btn px-5 mb-5">Add Memory</Button>
                    </div>
                </Form>
        </Container>
        </>
    )
}

export default AddPost;

Answer 1

使用 connect-multiparty、busboy 等，并在后端使用 express-fileupload 包。例如：

// index.js
import fileUpload from "express-fileupload";

app.use(fileUpload({createParentPath: true}));
app.use(cors());
app.use(express.json({ extended: true })); //bodyParser
app.use(express.urlencoded({extended: true })); //bodyParser

app.use('/posts', postsRoutes);

//post.js
import connectMultiparty from "connect-multiparty";
const multipartMiddleware = connectMultiparty();

router.post('/addpost', async(req, res) => {
  // create and save your data to database
}, multipartMiddleware);

Post 验证失败：使用 react-hooks-form 时需要路径“...”

Post validation failed: Path '...' is required when using react-hooks-form

reactjs

post

file-upload

multipartform-data

react-hook-form