在Ant Design Pro 5(基于React)的前端界面结合Express后端实现上传整个文件夹的文件,实际上是在前端进行多文件选择,并通过POST请求将文件列表发送到后端,然后由后端处理上传。由于浏览器API限制,直接上传整个文件夹并不支持,但用户可以选择文件夹内的所有文件进行上传。
以下是大致步骤:
-
前端部分 (使用antd design pro)
使用
antd 中的Upload 组件,设置multiple 属性为true 以支持多文件上传,同时可以自定义上传前后的钩子函数来处理逻辑。import { Upload } from 'antd'; import { Dragger } from 'antd/lib/upload'; const { DraggerProps } = Upload; const MyUploader = () => ( <Dragger {...DraggerProps}> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">点击或拖拽文件夹到这里上传</p> <p className="ant-upload-hint"> 支持单个或批量上传,但请注意,浏览器不支持直接上传整个文件夹。 </p> {/* 可以添加beforeUpload钩子函数来处理上传前的逻辑 */} {/* 在onchange事件中收集所有已选择的文件 */} </Dragger> );
-
前端上传逻辑
用户选择多个文件后,你可以通过onChange事件获取到选中的所有文件对象数组,然后使用FormData对象打包这些文件并发送到服务器。
const onFileChange = (info) => { if (info.file.status === 'uploading') { // 正在上传... } else if (info.file.status === 'done') { // 上传成功,这里可以调用后端接口通知上传完成 } else if (info.file.status === 'error') { // 上传失败 } // 将所有待上传的文件加入formData const formData = new FormData(); info.fileList.forEach((file) => { formData.append('files', file.originFileObj); }); // 发送POST请求到后端 axios.post('/api/upload/bulk', formData, { headers: {'Content-Type': 'multipart/form-data'}, }); };
-
后端部分 (使用Express)
在Express服务器端接收文件并保存。
const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); // 设置临时存储路径 app.post('/api/upload/bulk', upload.array('files'), (req, res) => { req.files.forEach(file => { // 文件已经存储在uploads/目录下,这里可以根据需要移动或处理这些文件 }); res.send('Files uploaded successfully.'); }); app.listen(3000, () => console.log('Server started on port 3000'));
注意:上述代码片段并未涵盖完整功能和错误处理,请根据实际项目需求进行调整。对于大量文件的上传,可能还需要考虑分片上传、断点续传等优化方案。另外,由于浏览器的安全策略限制,通常不能直接获取到文件夹路径,只能让用户手动选择文件夹内的所有文件。