如何从NextJS浏览器端直传文件至云存储或FTP服务器？

完全可以实现，但要注意NextJS API路由运行在服务端，不能直接用你示例里的本地文件路径，得先接收前端上传的文件，再通过node-ftp转发到FTP存储服务器。下面是具体实现方案：

实现步骤 #

• 安装依赖：需要ftp用于FTP连接，formidable用于处理前端上传的multipart/form-data格式文件
• 编写前端上传组件，通过FormData发送文件
• 编写NextJS API路由，接收文件后转存到FTP服务器

代码示例 #

1. 前端上传组件（pages/upload.js） #

export default function UploadPage() {
  const handleFileUpload = async (e) => {
    e.preventDefault();
    const file = e.target.fileInput.files[0];
    if (!file) return;

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

    try {
      const res = await fetch('/api/upload-to-ftp', {
        method: 'POST',
        body: formData,
      });
      res.ok ? alert('文件上传成功') : alert('上传失败');
    } catch (err) {
      console.error(err);
      alert('上传出错');
    }
  };

  return (
    <form onSubmit={handleFileUpload}>
      <input type="file" name="fileInput" />
      <button type="submit">上传到FTP服务器</button>
    </form>
  );
}

2. NextJS API路由（pages/api/upload-to-ftp.js） #

import { IncomingForm } from 'formidable';
import { Client } from 'ftp';
import fs from 'fs/promises';

// 禁用默认body解析，因为要处理multipart/form-data
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  const form = new IncomingForm();
  form.parse(req, async (err, fields, files) => {
    if (err) {
      return res.status(500).json({ message: '解析文件失败', error: err.message });
    }

    const uploadedFile = files.file;
    if (!uploadedFile) {
      return res.status(400).json({ message: '未上传文件' });
    }

    // 配置FTP服务器参数
    const ftpConfig = {
      host: '你的FTP服务器地址',
      user: 'FTP用户名',
      password: 'FTP密码',
      // 可选：port（默认21）、secure等
    };

    const ftpClient = new Client();
    try {
      // 建立FTP连接
      await new Promise((resolve, reject) => {
        ftpClient.on('ready', resolve);
        ftpClient.on('error', reject);
        ftpClient.connect(ftpConfig);
      });

      // 上传文件到FTP服务器
      await new Promise((resolve, reject) => {
        ftpClient.put(uploadedFile.filepath, uploadedFile.originalFilename, (err) => {
          err ? reject(err) : resolve();
        });
      });

      ftpClient.end();
      // 清理本地临时文件
      await fs.unlink(uploadedFile.filepath);

      res.status(200).json({ message: '文件成功上传到FTP服务器' });
    } catch (ftpErr) {
      ftpClient.end();
      // 出错时也清理临时文件
      await fs.unlink(uploadedFile.filepath).catch(() => {});
      res.status(500).json({ message: 'FTP上传失败', error: ftpErr.message });
    }
  });
}

注意事项 #

• 先安装依赖：npm install ftp formidable
• 务必确保FTP服务器的连接参数正确，同时检查服务器防火墙/安全组是否开放FTP端口（默认21）
• 可根据需求添加文件类型校验、大小限制等逻辑
• 一定要清理服务端临时文件，避免磁盘空间被占用

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