node+React如何实现上传文件夹功能？

最近在完善自己的个人技术博客的时候，遇到了一个小问题，总所周知，上传文件功能是简单的，但不知道大家有没有写过上传文件夹的功能，如有需要，欢迎来看一下我的这篇文章。

技术栈

前端：React.js
后端：Express框架
用axios进行请求，后端用multer处理文件

前端代码

可能你还不知道，input 元素上还有一个的 webkitdirectory 属性。当设置了 webkitdirectory 属性之后，我们就可以选择目录了。

所选的文件中还会有一个webkitRelativePath属性，用于表示当前文件的相对路径。

import React from 'react';
import { Button, message } from "antd";
import { serverURL } from "@/apiConfig";
import axios from 'axios';
export default function AdminHome() {

  const folderInputRef = React.useRef(null);

  const styles = {
    hide: {
      display: "none",
    },
  };

  // 把文件夹分解成文件
  const handleFolderChange = (e) => {
    console.log(e.target.files.length);
    const list = Array.from(e.target.files);
    const files = list.map((file) => {
      if (file.webkitRelativePath) {
        const path = file.webkitRelativePath.split("/");
        const folders = path.slice(0, -1);
        file.folder = folders.join("#");
      }
      file.webkitRelativePath.replace(/\//g, "@");
      return file;
    });
    if (files.length > 0) {
      uploadFiles(files);
    }
    console.log('files', files);
    folderInputRef.current.value = "";
  };

  const MAX_COUNT = 1000;
  const MAX_SIZE = 1024 * 1024 * 1024;

  const uploadFiles = (files,idx = 0) => {
    if (files.length === 0) {
      return;
    }
    const list = Array.from(files);
    if (MAX_COUNT && list.length > MAX_COUNT) {
      message.error(`最多上传${MAX_COUNT}个文件`);
      return;
    }
    let isOverSize = false;
    if (MAX_SIZE) {
      isOverSize =
        list.filter((file) => {
          return file.size > MAX_SIZE;
        }).length > 0;
    }

    if (isOverSize) {
      message.error(`最多上传${MAX_SIZE / 1024 / 1024}M大的文件`);
      return;
    }
    // 设置文件类型
    // let isNotMatchType = false;
    // if (ACCEPS.length > 0) {
    //   isNotMatchType =
    //     list.filter((file) => {
    //       return ACCEPS.length > 0 && !ACCEPS.includes(file.type);
    //     }).length > 0;
    // }

    // if (isNotMatchType) {
    //   message.error("上传文件的类型不合法");
    //   return;
    // }
    let formData = new FormData();
    // 每次上传一个文件
    formData.append("files", files[idx], files[idx].webkitRelativePath.replace(/\//g, "@"));
    // 每次上传多个文件   可选，如果想要提升上传速度，可以选择一次上传多个文件，但上限为20个(亲测)，超过20个可能会报错
    // files.forEach((file, i) => {
    //   formData.append(
    //     'files', 
    //     files[i],
    //     files[i].webkitRelativePath.replace(/\//g, "@")
    //   );
    // });
    // 你的服务器接口地址
    axios.post(serverURL + "/api/index/uploadFolder", formData)
      .then((res) => {
        console.log("res", res);
        if(idx<files.length-1){
          // 递归调用，可通过idx自行编写进度条
          uploadFiles(files,idx+1);
        }
        if(idx == files.length-1){
          message.success("上传成功");
        }
      })
      .catch((err) => {
        console.log("err", err);
        message.error("上传失败");
      })
  };

  return (
    <div>
      <Button onClick={() => folderInputRef.current.click()} type="primary">
        上传文件夹
      </Button>
      <input
        style={styles.hide}
        directory=""
        webkitdirectory=""
        onClick={(e) => e.stopPropagation()}
        onChange={handleFolderChange}
        multiple
        type="file"
        ref={folderInputRef}
      />

    </div>
  )
}

后端代码

安装multer

npm install --save multer

接口代码

// 公共接口部分
var express = require("express");
var router = express.Router();
const fs = require("fs");
const path = require("path");
const multer  = require('multer');

const UPLOAD_DIR = path.join(__dirname.replace("routes", "upload"));
const storage = multer.diskStorage({
  destination: async function (req, file, cb) {
    let relativePath = file.originalname.replace(/@/g, path.sep);
    let index = relativePath.lastIndexOf(path.sep);
    let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index));
    // 确保文件目录存在，若不存在的话，会自动创建
    fs.mkdirSync(fileDir, { recursive: true });
    cb(null, fileDir);
  },
  filename: function (req, file, cb) {
    let parts = file.originalname.split("@");
    cb(null, `${parts[parts.length - 1]}`); 
  },
});
const upload = multer({storage: storage});

// 上传文件夹接口
router.post("/uploadFolder", upload.array('files', 1000),(req, res) => {
  console.log('req.files',req.files);
  if(req.files && req.files.length){
    res.send({
      code: 200,
      msg: "文件夹上传成功"
    })
  }else{
    res.send({
      code: 200,
      msg: "文件夹上传失败"
    })
  }
});

module.exports = router;

所遇到的问题

1. 为了确保multer 能正确处理文件的路径，我们需要对路径进行特殊处理。即把 /斜杠替换为 @ 符号。
2. 一次性上传100个文件会报错，建议一次性上传20个以下文件，比较保险

亲测代码有效，有需要上传文件夹功能的朋友，拿走不谢~~