使用Node、React及Ant Design库上传图片至Cloudinary的问题求助

Hey there! I’ve built similar flows with Node, React, Ant Design, and Cloudinary before—let’s work through your problems step by step.

1. Fixing the "File Missing" Error When Uploading to Cloudinary #

Your current setup has a key issue with how you’re sending the file from frontend to backend:

What’s Wrong #

• The Ant Design Upload component gives you a browser File object, but you’re sending it directly in a JSON payload via Axios. Browsers can’t serialize File objects into JSON, so your backend ends up getting nothing or invalid data in req.body.image.
• Cloudinary’s uploader.upload() expects either a file path, remote URL, or file buffer—not a raw JSON value.

How to Fix It #

Frontend: Use FormData to Send the File

You need to wrap the file in a FormData object (which handles multipart/form-data encoding, the standard for file uploads) instead of sending it as JSON.

Modified frontend code:

const Uploader = () => {
  const { token } = useSelector(state => state.user);
  const [form] = Form.useForm(); // If you're using Ant Design Form

  const handleUpload = async ({ file, onSuccess, onError }) => {
    try {
      const formData = new FormData();
      formData.append('image', file); // Append the file to FormData

      const res = await axios.post(
        `${process.env.REACT_APP_API}/uploadImages`,
        formData, // Send FormData instead of JSON
        {
          headers: {
            authtoken: token,
            // Don't manually set Content-Type—Axios will auto-set it with the correct boundary
          }
        }
      );

      // If using Ant Design Form, set the field value here
      form.setFieldsValue({ imageUrl: res.data.url });
      onSuccess(res.data); // Notify AntD Upload of success for preview state
    } catch (err) {
      console.error(err);
      onError(err);
    }
  };

  return (
    <Upload
      listType="picture"
      showUploadList
      customRequest={handleUpload} // Use customRequest instead of onChange
      beforeUpload={() => false} // Prevent AntD from auto-uploading
    >
      <Button>Upload</Button>
    </Upload>
  );
};

export default Uploader;

Backend: Handle multipart/form-data with a Middleware

You’ll need a middleware like multer to parse the uploaded file from FormData. First install it:

npm install multer

Then modify your backend code:

const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const fs = require('fs');

// Configure multer to store files temporarily (or use memory storage)
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, './tmp'),
  filename: (req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`)
});
const upload = multer({ storage });

// Update your route to use the multer middleware
app.post('/uploadImages', upload.single('image'), async (req, res) => {
  try {
    // req.file.path is the path to the temporary uploaded file
    const result = await cloudinary.uploader.upload(req.file.path, {
      public_id: `${Date.now()}`,
      resource_type: 'auto'
    });

    // Optional: Delete the temporary file after upload to save space
    fs.unlinkSync(req.file.path);

    res.json({ public_id: result.public_id, url: result.secure_url });
  } catch (error) {
    console.error(error);
    res.status(400).send(error.message);
  }
});

2. Fixing the onChange Triggering 3 Times (Duplicate Uploads) #

Ant Design’s Upload component fires onChange three times for each file:

1. When the file is first added (file.status = 'uploading')
2. During the upload process
3. When the upload completes/fails (file.status = 'done' or error)

Your original code was sending a request every time onChange fired—hence the duplicates.

Best Solution: Use customRequest #

As shown in the frontend code above, using customRequest lets you fully control the upload flow. Combine it with beforeUpload={() => false} to disable AntD’s default auto-upload behavior, so you only send the request once when you’re ready.

This perfectly aligns with your desired flow:

1. User selects file → preview shows up (AntD handles this automatically)
2. Your customRequest sends the file to your backend
3. On success, you update your Form component with the Cloudinary URL

Bonus: Handling Form Integration #

If you’re using Ant Design’s Form component, you can tie the upload result directly to a form field using form.setFieldsValue() (as shown in the frontend code). This ensures the image URL is included when you submit the form.

内容的提问来源于stack exchange，提问作者rgustv