首页 > 解决方案 > 当我发送带有图像的发布请求时得到这个:错误:请求失败,状态码 409

问题描述

当我发送没有图像的发布请求时,一切正常。当我添加图像时,它似乎失败了。我收到一个错误:请求失败,状态码为 409。这是我的反应表单页面的代码。

const  Form = ({ currentId, setCurrentId }) => {
    const [postData, setPostData] = useState({
        creator: '', title: '', message: '', tags:'', selectedFiles:''
    })
    const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);
    const classes = useStyles();
    const dispatch = useDispatch();

    useEffect(() => {
        if(post) setPostData(post);
    }, [post])

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId) {
            dispatch(updatePost(currentId, postData));

        } else {
            dispatch(createPost(postData));
            
        }
        //clear();

    }

    const clear = () => {
        setCurrentId(0);
        setPostData({creator: '', title: '', message: '', tags:'', selectedFiles:''})
    }

    return ( 
        <Paper className={classes.paper}>
            <form autoComplete='off' noValidate className={`${classes.root}${classes.form}`} onSubmit={handleSubmit}>
            <Typography variant='h6'>{currentId ? 'Editing' : 'Creating' } a Store</Typography>
            <TextField name='creator' variant='outlined' label='Creator' fullWidth value={postData.creator}onChange={(e) => setPostData({ ...postData, creator: e.target.value })}/>
             <TextField 
                name='Store Name' 
                variant='outlined' 
                label='name' 
                fullWidth 
                value={postData.title}
                onChange={(e) => setPostData({ ...postData, title: e.target.value })}
             />
             <TextField 
                name='message' 
                variant='outlined' 
                label='message' 
                fullWidth 
                value={postData.message}
                onChange={(e) => setPostData({ ...postData, message: e.target.value })}
             />
             <TextField 
                name='crypto' 
                variant='outlined' 
                label='crypto' 
                fullWidth 
                value={postData.tags}
                onChange={(e) => setPostData({ ...postData, tags: e.target.value })}
             />
             <div className={classes.fileInput}>
                <FileBase 
                    type='file'
                    multiple={false}
                    onDone={(base64) => setPostData({ ...postData, selectedFile: base64})}
                />
             </div>
             <Button className={classes.buttonSubmit} variant="container" color="primary" size="large" type="submit" fullwidth>Submit</Button>
             <Button  variant="contained" color="secondary" size="small" onClick={clear} fullwidth>Clear</Button>
            </form>
        </Paper>
     );
}
 
export default Form;

这是我的服务器端路由的功能。我在这里获取表单信息并将其发布到服务器。

export const createPost = async (req, res) => {
    const { title, message, selectedFile, creator, tags } = req.body;

    const newPostMessage = new PostMessage({ title, message, selectedFile, creator, tags })

    try {
        await newPostMessage.save();

        res.status(201).json(newPostMessage );
    } catch (error) {
        res.status(409).json({ message: error.message });
    }
}

这是我的 mongodb 模型。

import mongoose from 'mongoose';

const postSchema = mongoose.Schema({

    title: String,
    message: String,
    creator: String,
    tags: [String],
    selectedFile: String,
    likeCount: {
        type: Number,
        default: 0
    },
    createdAt: {
        type: Date,
        default: new Date()
    },

})

const PostMessage = mongoose.model('PostMessage', postSchema);

export default PostMessage;

标签: javascriptnode.jsreactjsmongodbexpress

解决方案


您的 Mongo 模型已selectedFile声明为字符串。您的前端正在发送一个 base64 编码的 jpeg 文件,Mongo 不知道如何将其转换为字符串。

查看这个问题,了解在 Mongo 中存储 jpeg 的一些线索。


推荐阅读