是阿星啊 2024-03-29 15:42 采纳率: 33.3%
浏览 19

拖拽上传文件夹，里面包括子文件夹和文件，前后端如何去处理？

现在需求是拖拽文件夹上传 文件夹包括多个子文件夹以及文件，数量至少几千个这种，前端通过数组需要怎么传？后端接收循环解析挺影响性能的。麻烦来讲解下思路。万分感谢

  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-03-29 15:42
    关注

    引自免费微信小程序：皆我百晓生

    前端文件夹上传：

    1. 创建HTML文件（如index.html）并添加一个input元素用于接受文件输入：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <label for="file-input">Select files:</label>
    <input type="file" id="file-input" accept=".jpg, .png, .pdf" multiple>

    <button onclick="uploadFiles()">Upload Files</button>

    <script src="script.js"></script>
</body>
</html>
    1. 编写JavaScript文件（如script.js）来实现文件上传功能：
    const input = document.getElementById('file-input');
const fileInput = new FormData(input);

function uploadFiles() {
    const files = fileInput.files;
    if (files.length === 0) return;

    // 使用async/await处理异步请求
    Promise.all(files.map(file => fetch('/upload', {
        method: 'POST',
        body: file,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })).then(responses => {
        // 处理每个上传响应
        responses.forEach(response => response.json());

        console.log('Uploads successful!');
    }).catch(error => {
        console.error('Error uploading files:', error);
    });
}

// 在需要的地方导入fetch模块
import fetch from 'fetch';

// 导入文件浏览器API
import '/FileSaver.js';
    1. 在/upload路由处处理文件上传请求：
    app.post('/upload', async (req, res) => {
    try {
        // 解析上传的文件流并存储到本地磁盘
        const file = await FileSaver.arrayToBlob(req.body.files);
        fs.writeFile('/path/to/uploaded/file.jpg', file, (err) => {
            if (err) throw err;
            console.log('File uploaded successfully.');
        });

        res.status(200).json({ message: 'File uploaded successfully' });
    } catch (error) {
        console.error('Error uploading file:', error);
        res.status(500).send('An error occurred while uploading the file.');
    }
});

    后端文件处理逻辑：

    1. 首先，确保你的服务器已经配置好相应的文件上传接口，例如在Node.js环境中可以使用Express框架进行处理。以下是基础示例：

      const express = require('express');
const app = express();

// 指定文件上传的URL路径和返回路径
app.post('/upload', async (req, res) => {
    try {
        const files = req.files;
        const chunks = [];
        let index = 0;
        for (const file of files) {
            const chunkSize = Math.min(10 * 1024 * 1024, file.size);
            chunks.push(chunkSize);
            index += chunkSize;
            if (index >= chunks.length) break; // 文件已全部上传

            const reader = new FileReader();
            reader.onload = () => {
                chunks[index] = reader.result;
                index++;
            };
            reader.readAsArrayBuffer(file);
        }

        const result = chunks.reduce((acc, chunk) => acc.concat(chunk), []);

        // 存储上传的数据到数据库或本地存储
        const data = JSON.stringify(result);
        const options = { filename: 'uploads/' + Date.now(), type: 'image/jpeg' };

        // 提交文件数据
        const response = await fetch('/store/upload', options);
        const contentType = response.headers['content-type'];

        if (!contentType.startsWith('application/json')) {
            console.error('Invalid content type received');
            res.status(400).send('Invalid content type received.');
        } else {
            const file = await response.blob();
            res.status(200).json({ file });
        }
    } catch (error) {
        console.error('Error processing file upload:', error);
        res.status(500).send('An error occurred while uploading the file.');
    }
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

      这里我们假设有一个名为store的服务端应用，并有一个路由 /store/upload 接受文件上传请求。我们将读取上传的文件部分，并将其存储为JSON字符串。

      对于文件类型为图片的上传，我们使用了Node.js的FileReader API 和 Blob 对象来实现。对于其他文件类型，我们可以将上传的整个文件转换为Blob对象，并根据需要进一步处理。

      下面是一个简单的例子，展示如何在服务端发送一个JSON字符串到客户端：

      const app = express();

app.post('/store/upload', async (req, res) => {
    try {
        const files = req.files;
        const chunks = [];
        let index = 0;
        for (const file of files) {
            const chunkSize = Math.min(10 * 1024 * 1024, file.size);
            chunks.push(chunkSize);
            index += chunkSize;
            if (index >= chunks.length) break; // 文件已全部上传

            const reader = new FileReader();
            reader.onload = () => {
                chunks[index] = reader.result;
                index++;
            };
            reader.readAsArrayBuffer(file);
        }

        const result = chunks.reduce((acc, chunk) => acc.concat(chunk), []);

        const formData = new FormData();
        formData.append('file', result[0]);

        const response = await fetch('/store/store', {
            method: 'POST',
            body: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        const contentType = response.headers['content-type'];

        if (!contentType.startsWith('application/json')) {
            console.error('Invalid content type received');
            res.status(400).send('Invalid content type received.');
        } else {
            const file = await response.blob();
            res.status(200).json({ file });
        }
    } catch (error) {
        console.error('Error processing file upload:', error);
        res.status(500).send('An error occurred while uploading the file.');
    }
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

      注意：这段代码只是一个基本示例，实际的业务场景可能涉及更复杂的错误处理、安全性检查等，比如防止恶意上传，验证上传的文件格式，以及在服务器端对文件进行正确的保存等。在生产环境，你可能还需要考虑并发控制、连接池管理等问题。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 3月29日