使用Express、Multer和React-Dropzone无法上传图片至uploads文件夹求助

Hey there! Let's walk through the common issues that might be stopping your uploads from hitting the uploads folder when using Express, Multer, and React-Dropzone. Here are the key things to check:

Multer is the backbone of your server-side upload handling, so let's start here:

• Ensure the uploads folder exists: Multer won't automatically create the target directory. Add this code when starting your Express app to make sure the folder is there (and nested folders if needed):

  const fs = require('fs');
  const uploadDir = './uploads';
  if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true }); // recursive creates parent folders too
  }
  

• Check storage/destination settings: If you're using custom disk storage, double-check the destination path matches your project's root (not the React app's folder, if you're using a separate frontend):

  const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, './uploads/'); // Confirm this path is relative to your Express server's root
    },
    filename: (req, file, cb) => {
      cb(null, `${Date.now()}-${file.originalname}`);
    }
  });
  const upload = multer({ storage: storage });
  

• Rule out file filtering/limits: Make sure your Multer setup isn't accidentally blocking image files. If you added a fileFilter, verify it correctly allows image MIME types:

  const upload = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
      if (file.mimetype.startsWith('image/')) {
        cb(null, true);
      } else {
        cb(new Error('Only images are allowed!'), false);
      }
    }
  });
  

• Match the field name: The string you pass to upload.single() must exactly match the name attribute in your React-Dropzone component (you have name='avatar', so use upload.single('avatar')):

  app.post('/api/upload', upload.single('avatar'), (req, res) => {
    if (!req.file) {
      return res.status(400).send('No file was uploaded.');
    }
    res.status(200).json({ filePath: `/uploads/${req.file.filename}` });
  });
  

• Handle errors in the route: Add an error-handling middleware to catch Multer-specific issues like invalid file types or size limits:

  app.post('/api/upload', upload.single('avatar'), (req, res) => {
    // Success logic
  }, (err, req, res, next) => {
    res.status(400).send(`Upload error: ${err.message}`);
  });
  

• Avoid conflicting middleware: Don't use body-parser for multipart/form-data requests—Multer handles this natively. If you have body-parser setup, make sure it's not applied to your upload route.

Your frontend needs to send the file correctly as multipart/form-data:

• Build FormData properly: In your onDrop function, append the file with the same field name used in Multer (avatar):

  onDrop(files) {
    const formData = new FormData();
    // For single upload, use files[0]; for multiple, loop through the array
    formData.append('avatar', files[0]);
  
    fetch('/api/upload', {
      method: 'POST',
      body: formData
      // Don't manually set Content-Type! FormData auto-sets it with the correct boundary
    })
    .then(res => res.json())
    .then(data => console.log('Upload success:', data))
    .catch(err => console.error('Upload failed:', err));
  }
  

• Check for CORS issues: If your React app runs on a different port than Express (e.g., 3000 vs 5000), add CORS middleware to your Express server:

  const cors = require('cors');
  app.use(cors()); // Allow all origins for testing; restrict in production
  

• On Linux/macOS, make sure your Node.js process has write access to the uploads folder. Run this command to adjust permissions if needed:

  chmod 755 ./uploads
  

• Double-check the folder path is relative to your Express server's root directory, not your React project's folder (if they're separate repos).

• Log req.file in your Express route—if it's undefined, Multer isn't receiving the file (problem is in frontend FormData or route setup).
• Test the upload endpoint directly with Postman: Send a POST request with a file in the avatar field. If this works, the issue is in your React-Dropzone code.
• Check your browser's Network tab: Look at the request payload to confirm the file is being sent, and check the response for error messages.

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