基于Docker部署的Web应用实现本地目录完整上传方案咨询

1. 基于HTML5原生目录选择+自定义路径处理 #

• 前端使用带webkitdirectory属性的文件输入框，允许用户直接选择整个目录：

  <input type="file" id="directory-input" webkitdirectory multiple>
  

• 通过JS获取文件的webkitRelativePath属性，该属性会返回文件相对于选中根目录的完整相对路径。
• 将每个文件连同其相对路径通过FormData发送至后端：

  const input = document.getElementById('directory-input');
  input.addEventListener('change', (e) => {
    const formData = new FormData();
    Array.from(e.target.files).forEach(file => {
      formData.append('upload-files', file, file.webkitRelativePath);
    });
    fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
  });
  

• 后端接收请求后，根据相对路径递归创建目录结构，再保存文件。以Node.js为例：

  const fs = require('fs').promises;
  const path = require('path');
  
  async function processUpload(req) {
    for (const file of req.files['upload-files']) {
      const targetPath = path.join('./upload-storage', file.webkitRelativePath);
      await fs.mkdir(path.dirname(targetPath), { recursive: true });
      await fs.copyFile(file.tempFilePath, targetPath);
    }
  }
  

  补充：你之前用的UPPY其实支持目录上传，只需在Dashboard插件中配置allowDirectoryUpload: true即可开启该功能。

2. 前端打包目录为ZIP后上传，后端解压保留结构 #

• 前端用JSZip库将选中目录打包为ZIP文件，再上传到后端：

  const input = document.getElementById('directory-input');
  input.addEventListener('change', async (e) => {
    const zip = new JSZip();
    Array.from(e.target.files).forEach(file => {
      zip.file(file.webkitRelativePath, file);
    });
    const zipBlob = await zip.generateAsync({ type: 'blob' });
    const formData = new FormData();
    formData.append('zip-archive', zipBlob, 'uploaded-dir.zip');
    fetch('/api/upload-zip', {
      method: 'POST',
      body: formData
    });
  });
  

• 后端接收ZIP文件后，用解压库（如Node.js的adm-zip、Python的zipfile）解压至指定目录，自动保留原目录结构：

  const AdmZip = require('adm-zip');
  
  async function processZipUpload(req) {
    const zipFile = req.files['zip-archive'];
    const zip = new AdmZip(zipFile.tempFilePath);
    zip.extractAllTo('./upload-storage', true);
  }
  

  该方案兼容性更强，能适配部分不支持webkitdirectory的浏览器。

3. 拖拽式目录上传实现 #

• 前端监听页面拖拽区域的事件，获取拖拽目录内的文件及相对路径：

  const dropArea = document.getElementById('drop-zone');
  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    const formData = new FormData();
    for (const item of e.dataTransfer.items) {
      if (item.kind === 'file') {
        const file = item.getAsFile();
        const entry = item.webkitGetAsEntry();
        if (entry?.isFile) {
          const relativePath = entry.fullPath.substring(1);
          formData.append('upload-files', file, relativePath);
        }
      }
    }
    fetch('/api/upload', { method: 'POST', body: formData });
  });
  

• 后端处理逻辑与方案1完全一致，基于相对路径创建目录并保存文件。

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