如何从一个NodeJS应用向另一个NodeJS应用上传图片？

当然有可行方案，核心思路是前端通过FormData构造文件请求，后端用multer中间件处理文件上传并存储到指定目录，同时解决跨域问题。

后端实现步骤 #

1. 安装依赖
   安装处理文件上传的multer和解决跨域的cors：

   npm install express multer cors
   

2. 配置后端服务
   创建后端API接口，指定图片存储路径，处理文件上传请求：

   const express = require('express');
   const multer = require('multer');
   const cors = require('cors');
   const fs = require('fs');
   const app = express();
   
   // 启用CORS，允许前端跨域请求
   app.use(cors());
   
   // 确保目标存储文件夹存在，不存在则自动创建
   const uploadDir = './uploads';
   if (!fs.existsSync(uploadDir)) {
     fs.mkdirSync(uploadDir);
   }
   
   // 配置multer的存储规则：指定路径和文件名
   const storage = multer.diskStorage({
     destination: (req, file, cb) => {
       cb(null, uploadDir); // 这里替换成你需要的后端指定文件夹路径
     },
     filename: (req, file, cb) => {
       // 生成唯一文件名，避免重复覆盖
       const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}.${file.originalname.split('.').pop()}`;
       cb(null, uniqueName);
     }
   });
   
   // 配置上传限制：文件大小、允许类型
   const upload = multer({
     storage: storage,
     limits: { fileSize: 5 * 1024 * 1024 }, // 限制最大5MB
     fileFilter: (req, file, cb) => {
       const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
       if (allowedTypes.includes(file.mimetype)) {
         cb(null, true);
       } else {
         cb(new Error('仅支持JPG、PNG、GIF格式的图片'));
       }
     }
   });
   
   // 处理图片上传的POST接口
   app.post('/api/upload-image', upload.single('image'), (req, res) => {
     if (!req.file) {
       return res.status(400).json({ code: 400, msg: '请选择要上传的图片' });
     }
     res.status(200).json({
       code: 200,
       msg: '上传成功',
       filePath: req.file.path,
       fileName: req.file.filename
     });
   });
   
   // 启动后端服务
   const PORT = 3000;
   app.listen(PORT, () => {
     console.log(`后端服务运行在 http://localhost:${PORT}`);
   });
   

前端实现步骤 #

前端通过FormData封装文件，用fetch或axios发送POST请求到后端接口：

原生JS示例 #

<!-- HTML部分 -->
<input type="file" id="imagePicker" accept="image/*">
<button onclick="handleUpload()">上传图片</button>

// JS部分
function handleUpload() {
  const fileInput = document.getElementById('imagePicker');
  const file = fileInput.files[0];
  
  if (!file) {
    alert('请先选择图片');
    return;
  }

  const formData = new FormData();
  formData.append('image', file); // 字段名'image'要和后端upload.single('image')保持一致

  fetch('http://localhost:3000/api/upload-image', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(result => {
    console.log(result.msg);
    console.log('图片存储路径:', result.filePath);
  })
  .catch(err => {
    console.error('上传失败:', err);
    alert('上传失败，请稍后重试');
  });
}

React示例（可选） #

import { useState } from 'react';

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('image', selectedFile);

    try {
      const res = await fetch('http://localhost:3000/api/upload-image', {
        method: 'POST',
        body: formData
      });
      const result = await res.json();
      console.log(result.msg);
    } catch (err) {
      console.error('上传失败:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button type="submit">上传图片</button>
    </form>
  );
}

export default ImageUpload;

注意事项 #

• 后端的存储文件夹路径要确保有读写权限，避免权限不足导致存储失败；
• 可以根据业务需求扩展，比如对上传的图片进行压缩、生成缩略图等；
• 如果是生产环境，建议将图片存储到云存储（如OSS、S3）而非本地文件夹，避免服务器存储压力和文件丢失风险。

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