React base64 图片上传导致409错误

Question

I am currently coding a app in React, where you can upload images with text, just like a social media app. If I want to upload an image, I am getting a error: POST http://localhost:5000/posts 409 (Conflict) Without the Image, everything works fine. I don't know where the mistake could be, so it would be nice if you can help me. This is my React Code:

import { useState } from "react";
import FileBase64 from "react-file-base64";
export default function Create() {
  const [postData, setPostData] = useState({
    creator: "",
    title: "",
    content: "",
    tags: "",
    selectedFile: "",
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetch("http://localhost:5000/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(postData),
      });

      console.log("Post created");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit}>
        <h2 className="form-title">Create a Memory</h2>
        {/* Creator */}
        <div className="form-group">
          <label htmlFor="creator">Creator</label>
          <input
            value={postData.creator}
            onChange={(e) =>
              setPostData({ ...postData, creator: e.target.value })
            }
            type="text"
            id="creator"
            placeholder="Creator"
          />
        </div>
        {/* Title */}
        <div className="form-group">
          <label htmlFor="title">Title</label>
          <input
            value={postData.title}
            onChange={(e) =>
              setPostData({ ...postData, title: e.target.value })
            }
            type="text"
            id="title"
            placeholder="Title"
          />
        </div>
        {/* Content */}
        <div className="form-group">
          <label htmlFor="content">Content</label>
          <input
            value={postData.content}
            onChange={(e) =>
              setPostData({ ...postData, content: e.target.value })
            }
            type="text"
            id="content"
            placeholder="Content"
          />
        </div>
        {/* Tags */}
        <div className="form-group">
          <label htmlFor="tags">Tags</label>
          <input
            value={postData.tags}
            onChange={(e) => setPostData({ ...postData, tags: e.target.value })}
            type="text"
            id="tags"
            placeholder="Tags"
          />
        </div>
        {/* selectedFile */}
        <label className="custom-file-upload">
          <FileBase64
            type="file"
            multiple={false}
            onDone={(base64) => {
              setPostData({ ...postData, selectedFile: base64 });
            }}
          />
        </label>
        {/* Submit */}
        <button
          style={{ width: "90%", fontSize: "inherit" }}
          className="btn-primary"
          type="submit"
        >
          Submit
        </button>
      </form>
    </div>
  );
}

MongoDB Post Model:

import mongoose from "mongoose";

const postSchema = mongoose.Schema({
  title: String,
  content: String,
  creator: String,
  tags: [String],
  selectedFile: String,
  likeCount: {
    type: Number,
    default: 0,
  },
  createdAt: {
    type: Date,
    default: new Date(),
  },
});

const Post = mongoose.model("Post", postSchema);

export default Post;

Create Post function:

export const createPost = async (req, res) => {
  try {
    const post = new Post(req.body);
    await post.save();
    res.status(201).json(post);
  } catch (error) {
    res.status(409).json({ message: error.message });
  }
};

And server index.js

import express from "express";
import cors from "cors";
import mongoose from "mongoose";

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json({ limit: "30mb" }));

import postRoutes from "./routes/posts.js";

app.use("/posts", postRoutes);

try {
  mongoose
    .connect(
      "<ConnectionString>",
      {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }
    )
    .then(() => {
      app.listen(port, () =>
        console.log(`Server started on port http://localhost:${port}`)
      );
    });
} catch (error) {
  console.log(error.message);
}

Answer 1

On your code at FileBase64, you should enclose base64 with {}

<FileBase64
    type="file"
    multiple={false}
    onDone={({base64}) => {
    setPostData({ ...postData, selectedFile: base64 });
    }}
 />