实现文件的上传功能以及文件上传到服务器

Cheney 胤

于 2024-10-08 11:31:20 发布

阅读量377

点赞数 8

文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_70707972/article/details/142755312

版权

页面前端部分

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" enctype="multipart/form-data">
        <input type="file" id="fileInput" name="file">
        <button type="button" onclick="submitForm()">上传</button>
    </form>
    <script src="upload.js"></script>
</body>
</html>

JavaScript (upload.js)：使用FormData对象和fetch API发送文件到服务器。

function submitForm() {
    const form = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择文件');
        return;
    }

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

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功', data);
    })
    .catch(error => {
        console.error('上传失败', error);
    });
}

服务器后端部分

以Node.js为例，使用express框架和multer中间件处理文件上传。

安装依赖：
```
npm init -y
npm install express multer
```

创建服务器（server.js）：

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// 配置multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

const upload = multer({ storage: storage });

// 创建路由处理文件上传
app.post('/upload', upload.single('file'), (req, res) => {
    res.json({ message: '上传成功', file: req.file });
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});