在Ant Design Pro 5（基于React）的前端界面結(jié)合Express后端實(shí)現(xiàn)上傳整個(gè)文件夾的文件，實(shí)際上是在前端進(jìn)行多文件選擇，并通過(guò)POST請(qǐng)求將文件列表發(fā)送到后端，然后由后端處理上傳。由于瀏覽器API限制，直接上傳整個(gè)文件夾并不支持，但用戶(hù)可以選擇文件夾內(nèi)的所有文件進(jìn)行上傳。

以下是大致步驟：

1. 前端部分 (使用antd design pro)

   使用antd中的Upload組件，設(shè)置multiple屬性為true以支持多文件上傳，同時(shí)可以自定義上傳前后的鉤子函數(shù)來(lái)處理邏輯。

   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">點(diǎn)擊或拖拽文件夾到這里上傳</p>
       <p className="ant-upload-hint">
         支持單個(gè)或批量上傳，但請(qǐng)注意，瀏覽器不支持直接上傳整個(gè)文件夾。
       </p>
       {/* 可以添加beforeUpload鉤子函數(shù)來(lái)處理上傳前的邏輯 */}
       {/* 在onchange事件中收集所有已選擇的文件 */}
     </Dragger>
   );

2. 前端上傳邏輯

   用戶(hù)選擇多個(gè)文件后，你可以通過(guò)onChange事件獲取到選中的所有文件對(duì)象數(shù)組，然后使用FormData對(duì)象打包這些文件并發(fā)送到服務(wù)器。

   const onFileChange = (info) => {
     if (info.file.status === 'uploading') {
       // 正在上傳...
     } else if (info.file.status === 'done') {
       // 上傳成功，這里可以調(diào)用后端接口通知上傳完成
     } else if (info.file.status === 'error') {
       // 上傳失敗
     }
     
     // 將所有待上傳的文件加入formData
     const formData = new FormData();
     info.fileList.forEach((file) => {
       formData.append('files', file.originFileObj);
     });
   
     // 發(fā)送POST請(qǐng)求到后端
     axios.post('/api/upload/bulk', formData, {
       headers: {'Content-Type': 'multipart/form-data'},
     });
   };

3. 后端部分 (使用Express)

   在Express服務(wù)器端接收文件并保存。

   const express = require('express');
   const multer  = require('multer');
   
   const app = express();
   const upload = multer({ dest: 'uploads/' }); // 設(shè)置臨時(shí)存儲(chǔ)路徑
   
   app.post('/api/upload/bulk', upload.array('files'), (req, res) => {
     req.files.forEach(file => {
       // 文件已經(jīng)存儲(chǔ)在uploads/目錄下，這里可以根據(jù)需要移動(dòng)或處理這些文件
     });
   
     res.send('Files uploaded successfully.');
   });
   
   app.listen(3000, () => console.log('Server started on port 3000'));

注意：上述代碼片段并未涵蓋完整功能和錯(cuò)誤處理，請(qǐng)根據(jù)實(shí)際項(xiàng)目需求進(jìn)行調(diào)整。對(duì)于大量文件的上傳，可能還需要考慮分片上傳、斷點(diǎn)續(xù)傳等優(yōu)化方案。另外，由于瀏覽器的安全策略限制，通常不能直接獲取到文件夾路徑，只能讓用戶(hù)手動(dòng)選擇文件夾內(nèi)的所有文件。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-812173.html

到了這里，關(guān)于如何結(jié)合antd design pro 5 結(jié)合express 上傳多個(gè)文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！