Angular上传图片至Node.js服务器：POST请求未传输图片

Hey there! Let's figure out why your image isn't reaching your Node.js server—this is a super common issue for folks getting started with file uploads, so don't stress! I'll walk through the most likely fixes for both your Angular frontend and Node.js backend, since your code snippet cuts off mid-log.

It looks like you've got the file selected, but you're probably missing the critical step of wrapping the file in FormData (required for file uploads—you can't send files via plain JSON). Here's how to complete your code:

constructor(private httpClient: HttpClient) { }
selectedFile: File | null = null;

onFileSelected(event: Event) {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files[0]) {
    this.selectedFile = input.files[0];
    console.log("Selected file:", this.selectedFile); // Double-check the file is here
  }
}

// Add this method to handle the upload
uploadImage() {
  if (!this.selectedFile) {
    alert("Please select a file first!");
    return;
  }

  const formData = new FormData();
  // The first argument ('image') must match the key your Node server expects
  formData.append('image', this.selectedFile, this.selectedFile.name);

  this.httpClient.post('http://your-server-url/upload', formData, {
    // Important: Don't manually set Content-Type!
    // Angular will auto-generate the correct multipart/form-data header with a boundary
  }).subscribe(
    (response) => console.log("Upload successful!", response),
    (error) => console.error("Upload failed:", error)
  );
}

Key notes for Angular:

• Always use FormData for file uploads—this tells the server you're sending binary data, not JSON.
• Never manually set Content-Type: application/json for file requests—this breaks the multipart formatting the server needs to parse the file.
• Double-check that selectedFile isn't null before sending the request.

Node.js doesn't automatically handle multipart file uploads out of the box—you'll need the multer middleware to parse the incoming file data. Here's a complete minimal setup:

First, install the required packages:

npm install express multer cors --save

Then your server code:

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();

// Handle CORS (critical if Angular is on a different port like 4200)
app.use(cors());

// Configure multer to store uploaded files
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // Make sure this folder exists! Create it manually or add fs.mkdirSync logic
    cb(null, './uploads/');
  },
  filename: (req, file, cb) => {
    // Add a timestamp to avoid duplicate filenames
    cb(null, Date.now() + '-' + file.originalname);
  }
});

// Initialize multer with the storage config
const upload = multer({ 
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 } // Optional: Allow 5MB files (default is 1MB)
});

// Handle the POST request—upload.single('image') matches the FormData key from Angular
app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).send("No file was uploaded.");
  }
  // req.file contains all the file details: path, size, original name, etc.
  console.log("Received file:", req.file);
  res.status(200).send("File uploaded successfully!");
});

app.listen(3000, () => console.log("Server running on port 3000"));

Key notes for Node.js:

• Use multer—it's the standard tool for parsing file uploads in Express.
• Ensure the uploads folder exists on your server—if not, multer will throw an error.
• Use the cors middleware to avoid browser CORS errors (since your Angular app is likely on a different port than your Node server).

If it's still not working, check these:

• Browser DevTools: Go to the Network tab, find your POST request, and check the Request Payload—you should see the file listed under FormData. If not, your Angular code isn't building the FormData correctly.
• Server Logs: In your Node route, log req.file and req.body—if req.file is null, double-check that the FormData key (e.g., 'image') matches what multer expects (upload.single('image')).
• File Size: If your image is larger than 1MB, multer will reject it by default—add the limits config to increase the allowed size.

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