File upload with react, nodeJS multer doesn't work-CodePudding

i made this function, which takes the file value ( image ) from the file state and send it to upload route, through FormData object

  const [file, setFile] = useState(null);

  const submitPost = async (e) => {
  ...
    e.preventDefault();
    if (file) {
      const data = new FormData();
      const fileName = `${Date.now()}${file.name}`;
      data.append("name", fileName);
      data.append("file", file);
      try {
        await fetch("http://localhost:8000/upload", {
          headers: {
            "Content-type": "application/json",
          },
          method: "POST",
          body: JSON.stringify(data),
        });
        // window.location.reload();
      } catch (err) {
        console.log(err);
      }
    }
  };

the file value in the file state is coming from form file input

        <form className="postOptions" onSubmit={submitPost}>
          <div className="postAreaBot">
            <label htmlFor="file" className="downloadImg">
              <AddAPhotoIcon className="postIcon" />
              <span>Image</span>
            </label>
            <input
              type="file"
              accept=".png,.jpeg,.jpg"
              onChange={(e) => setFile(e.target.files[0])}
              id="file"
              style={{ display: "none" }}
            ></input>
          </div>
          <button type="submit">Post</button>
        </form>

and then sending the file value to this route for upload on folder images inside folder public using multer and path

app.use("/images", express.static(path.join(__dirname, "public/images")));

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "public/images");
  },
  filename: (req, file, cb) => {
    cb(null, req.body.name);
  },
});
const upload = multer({ storage });
app.post("/upload", upload.single("file"), (req, res) => {
  try {
    return res.status(200).json("File uploaded successfully");
  } catch (err) {
    console.log(err);
  }
});

but the image is not being uploaded

what have i tried

i tested the route using file.originalName for postman instead of file.req.body and the route does indeed works and images are being uploaded successfully, i also checked the values name and file in the data object and it appends it successfully, i can't see what is the problem, why it doesn't upload the image file through the react fetch request?

CodePudding user response：

Just remove the JSON.stringify. And change your content type, like the example below:

    await fetch("http://localhost:8000/upload", {
      headers: {
        "Content-type": "multipart/form-data",
      },
      method: "POST",
      body: data,
    });