为什么文件没有从 react-front-end 上传到后端

Question

Recently I started working on a project where I am using react as my front-end and node as my back-end. In this project, I have a requirement to upload multiple images from the front-end and my back-end will receive the files and they will be uploaded in cloudinary. I have created an API route for that. Which works just fine! but when I am trying to do that same thing from my react front-end, I am not receiving any files just getting an empty [] but when I was using postman, I was receiving all the files properly inside an array. What is the issue here? I guess this is a problem from my front-end. But I can't figure out what is the problem.

I am sharing my front-end and back-end code:-

front-end

const Upload = () => {
const [fileAra, setFileAra] = useState([]);

// for sending these files to the back-end
async function uploadProduct() {
    try {
      const formData = new FormData();

      formData.append("assets", fileAra);

      const res = await fetch("/get_product/post_product", {
        method: "POST",
        body: formData,
      });

      const body = await res.json();

      if (res.status === 200) {
        history.push(`/profile/${user._id}`);
        toast.dark(body.message);
      }
    } catch (err) {
      console.log(err);
    }
  }

    return (
        <input type="file" multiple onChange={(e) => setFileAra(e.target.files)} />
        <button onClick={uploadProduct}></button>
    )
}

Back-end route

router.post(
  "/post_product",
  checkAuth,
  multer.array("assets", 10),
  async function(req, res, next) {
    try {
      const pictureFiles = req.files;

      // map through images and create a promise array using cloudinary upload function
      const multiplePicturePromise = pictureFiles.map((picture) =>
        cloudinary.uploader.upload(picture.path, {
          folder: `devR-Commerce/products/${req.user.name}`,
        })
      );

      const imageResponses = await Promise.all(multiplePicturePromise);

      // separating each of the images into objects
      const allImagesSeparatedInObject = imageResponses.map((img) => ({
        photoId: img.public_id,
        photoUrl: img.secure_url,
      }));

      // creating a new product instance
      const newProduct = new Product({
        user: req.user._id,
        images: allImagesSeparatedInObject,
      });

      // saving the product in my database
      const savedProduct = await newProduct.save();

      // creating relation between these two collections: Product and User
      await User.updateOne(
        { _id: req.user._id },
        { $push: { products: savedProduct._id } }
      );

      res
        .status(200)
        .json({ message: "Product uploaded successfully", newProduct });
    } catch (err) {
      next(err);
    }
  },
);

Note: The back-end route works properly I have tested with Postman. But when I try to send the same files from my front-end, I don't receive any files. Might be a problem in the front-end. Please help me if you know the answer. If you need any additional information about this problem, please feel free to ask. Thanks for checking this out

Answer 1

You need to append each file to the FormData one by one and not attach the whole array at once, like this.

async function uploadProduct() {
    try {
      const formData = new FormData();

      for (let i = 0; i < fileAra.length; i++) {
         formData.append(fileAra[i].name, fileAra[i])
      }

      const res = await fetch("/get_product/post_product", {
        method: "POST",
        body: formData,
      });

      const body = await res.json();

      if (res.status === 200) {
        history.push(`/profile/${user._id}`);
        toast.dark(body.message);
      }
    } catch (err) {
      console.log(err);
    }
  }

you can check out this article explaining FormData for further details