前端读取文件夹并通过 SSH 上传:完整实现方案 ✅

在 Web 应用中,除了单文件上传,很多时候我们还需要用户直接选择整个文件夹,并批量上传到远程服务器。典型场景包括:静态资源部署、文档归档、远程备份等。本文整合了 前端文件夹选择方案(webkitdirectory + File System Access API)Node.js + node-ssh 后端上传,实现端到端的完整流程。


前端部分:选择文件夹并上传

前端的目标是让用户选择目录,遍历其中所有文件,并逐一上传到后端。

方案一:webkitdirectory

这是目前兼容度最好的方式,Chrome、Edge、Safari 均支持。

typescript 复制代码
<input type="file" id="folder" webkitdirectory multiple>
<script>
  document.getElementById('folder').addEventListener('change', async (event) => {
    const files = event.target.files;

    for (const file of files) {
      console.log(file.webkitRelativePath, file.name);

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

      await fetch("http://localhost:3000/upload", {
        method: "POST",
        body: formData
      });
    }
  });
</script>

优点

  • ✅ 兼容度较好,支持主流浏览器。
  • ✅ 能保留相对路径,方便后端还原目录结构。

缺点

  • ❌ Firefox 支持度差。
  • ❌ 必须通过 <input> 触发,不够灵活。

方案二:File System Access API

这是现代浏览器支持的新特性,可以通过 JS 调用目录选择器。

xml 复制代码
<script>
async function readDir() {
  const dirHandle = await window.showDirectoryPicker();

  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file") {
      const file = await entry.getFile();
      console.log(entry.name);

      const formData = new FormData();
      formData.append("file", file, entry.name);

      await fetch("http://localhost:3000/upload", {
        method: "POST",
        body: formData
      });
    }
  }
}
</script>

<button onclick="readDir()">选择文件夹并上传</button>

优点

  • ✅ 灵活,可结合按钮、拖拽交互。
  • ✅ 支持读写权限,可操作文件。

缺点

  • ❌ 兼容性差,仅 Chromium 内核浏览器支持(Chrome、Edge)。
  • ❌ 需要用户手动授权目录访问。

Node.js 后端:接收并通过 SSH 上传

后端主要任务:接收前端传输的文件 → 缓存到本地 → 通过 SSH 上传到远程服务器 → 删除缓存。

安装依赖

复制代码
npm install express multer node-ssh

完整后端代码

ini 复制代码
const express = require('express');
const multer = require('multer');
const { NodeSSH } = require('node-ssh');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });
const ssh = new NodeSSH();

// SSH 配置
const sshConfig = {
  host: 'your-server-ip',
  username: 'your-username',
  privateKey: '/path/to/private/key' // 或 password
};

// 接收文件上传
app.post('/upload', upload.single('file'), async (req, res) => {
  try {
    const localPath = req.file.path;
    const remotePath = path.join('/remote/dir', req.file.originalname);

    await ssh.connect(sshConfig);
    await ssh.putFile(localPath, remotePath);

    fs.unlinkSync(localPath); // 删除本地缓存文件

    res.send('上传成功');
  } catch (err) {
    console.error(err);
    res.status(500).send('上传失败');
  }
});

app.listen(3000, () => {
  console.log('服务已启动: http://localhost:3000');
});

工作流程

  1. 前端选择目录,逐个文件打包成 FormData
  2. 文件 POST 到后端 /upload
  3. 后端存储临时文件,再通过 node-ssh 传输到远程服务器。
  4. 删除临时文件,完成上传。

优缺点对比

前端

  • webkitdirectory:兼容更好,但交互有限。
  • File System Access API:交互灵活,但兼容性差。

后端

  • 采用 express + multer,简单易用。
  • 借助 node-ssh,实现自动化远程部署。

总结

  • 如果项目需要支持更多浏览器,推荐 webkitdirectory
  • 如果项目环境可控,推荐 File System Access API,更灵活。
  • 后端使用 Node.js + node-ssh,能快速实现从前端到服务器的自动化传输。

该方案特别适合 批量文件上传、静态资源部署、远程备份 等场景。

相关推荐
双向333 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下3 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友3 小时前
什么是基础设施中间件
前端·后端
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
海绵宝龙4 小时前
将若依(RuoYi)项目创建为私有Gitee仓库的完整步骤
前端·gitee
ps_xiaowang5 小时前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
sophie旭7 小时前
一道面试题,开始性能优化之旅(8)-- 构建工具和性能
前端·面试·性能优化
市民中心的蟋蟀7 小时前
第三章 钩入React 【上】
前端·react.js·架构