前端文件上传功能实现-CFANZ编程社区

在前端开发中，文件上传是一个常见的功能，通常用于允许用户将文件（如图片、文档等）上传到服务器。以下是实现文件上传的基本步骤和示例代码。

1. HTML 部分

首先，创建一个文件输入框，允许用户选择文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="fileInput" name="file" />
        <button type="submit">上传</button>
    </form>

    <script src="upload.js"></script>
</body>
</html>

2. JavaScript 部分

使用 JavaScript 处理文件上传逻辑。可以使用 FormData 对象来构建表单数据，并通过 fetch 或 XMLHttpRequest 发送到服务器。

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (file) {
        const formData = new FormData();
        formData.append('file', file);

        // 使用 fetch API 上传文件
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('上传成功:', data);
            alert('文件上传成功！');
        })
        .catch(error => {
            console.error('上传失败:', error);
            alert('文件上传失败！');
        });
    } else {
        alert('请选择一个文件！');
    }
});

3. 服务器端处理

服务器端需要处理上传的文件。以下是一个简单的 Node.js Express 服务器示例：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' }); // 设置上传文件的存储目录

app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('没有文件上传。');
    }

    // 文件信息可以通过 req.file 获取
    console.log('文件信息:', req.file);

    res.json({ message: '文件上传成功！', file: req.file });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

4. 其他注意事项

文件类型和大小限制：可以在前端和后端对文件类型和大小进行限制，确保上传的文件符合要求。
进度条：可以使用 XMLHttpRequest 或 fetch 的 ProgressEvent 来实现上传进度条。
安全性：确保服务器端对上传的文件进行安全检查，防止恶意文件上传。

5. 使用第三方库

如果你想要更高级的功能（如分片上传、断点续传等），可以考虑使用一些第三方库，如：

Axios：用于发送 HTTP 请求。
Dropzone.js：一个流行的文件上传库，支持拖放上传、预览等功能。
Uppy：一个功能强大的文件上传库，支持多种上传方式。

6. 示例：使用 Axios 上传文件

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (file) {
        const formData = new FormData();
        formData.append('file', file);

        axios.post('/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => {
            console.log('上传成功:', response.data);
            alert('文件上传成功！');
        })
        .catch(error => {
            console.error('上传失败:', error);
            alert('文件上传失败！');
        });
    } else {
        alert('请选择一个文件！');
    }
});