寻求前端JavaScript实现浏览器端FTP客户端的解决方案

核心限制说明 #

浏览器中的JavaScript受同源策略和安全沙箱限制，无法直接创建TCP连接与FTP服务器通信——哪怕是被动模式，也需要建立数据传输的TCP连接，这是浏览器JS的权限范围外的操作。所以纯前端JS实现FTP客户端是行不通的，必须通过后端服务中转FTP请求。

具体实现步骤 #

• 搭建Node.js后端服务，用你找到的Node.js FTP库（比如basic-ftp、ftp）处理所有FTP协议逻辑：连接服务器、列出文件、上传下载、创建目录等。
• 前端页面通过HTTP/HTTPS请求与后端交互，用Fetch API或Axios发送请求，传递FTP操作参数（主机、端口、用户名、密码、操作类型、文件路径等）。
• 后端收到请求后调用FTP库执行对应操作，再将结果返回给前端，前端负责渲染UI（文件列表、进度条、操作按钮等）。

关键细节处理 #

• 被动模式适配：你已配置FTP服务器为被动模式，后端的FTP库会自动处理被动模式下的数据连接，无需修改前端逻辑。
• 文件上传下载：上传时前端通过FormData把文件传给后端，后端再用FTP库上传到服务器；下载时后端从FTP服务器获取文件流，通过HTTP响应返回给前端。
• 进度反馈：后端可通过WebSocket或SSE（Server-Sent Events）将FTP操作进度（如上传百分比）实时推送给前端，实现类似FileZilla的进度显示。

示例代码片段 #

后端（Node.js + basic-ftp） #

const ftp = require("basic-ftp");
const express = require("express");
const app = express();
app.use(express.json());

app.post("/ftp/list", async (req, res) => {
  const { host, user, password, path } = req.body;
  const client = new ftp.Client();
  try {
    await client.access({ host, user, password, secure: false });
    const list = await client.list(path || "/");
    res.json(list);
  } catch (err) {
    res.status(500).json({ error: err.message });
  } finally {
    client.close();
  }
});

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

前端（JavaScript） #

async function fetchFileList(host, user, password, path) {
  try {
    const response = await fetch("http://localhost:3000/ftp/list", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ host, user, password, path })
    });
    const data = await response.json();
    // 将数据渲染到页面的文件列表区域
    console.log(data);
  } catch (err) {
    console.error("获取文件列表失败:", err);
  }
}

替代方案 #

如果不想自建后端，可尝试WebAssembly实现的FTP客户端，但这类方案小众，稳定性和兼容性不如后端中转方案。

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