node文件上传功能简易实现代码

这里是"node文件上传功能简易实现代码"的完整攻略。

1. 确认需求和环境

确认需要实现的功能是文件上传，并且需要选择上传文件的界面和上传后的文件存储位置。需要使用Node.js运行环境和一些必要的npm包，如express和multer。

2. 安装必要的npm包

npm install express multer --save

multer 是一个 Node.js 中间件，用来处理文件上传，同时配合 express 使用更加方便。

3. 创建项目文件结构

mkdir file-upload
cd file-upload
touch app.js package.json
mkdir public
cd public
mkdir uploads
cd ..

在文件夹“public”下创建一个子文件夹“uploads”，用于存储上传的文件。

4. 编写代码

app.js

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

const app = express();

// 指定上传文件的存储路径
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/uploads');
    },
    filename: function (req, file, cb) {
        cb(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`);
    }
});

// 创建 multer 实例
const upload = multer({ storage: storage });

// 为文件上传界面提供路由
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
});

// 处理上传请求
app.post('/upload', upload.single('myFile'), (req, res) => {
    res.send('上传成功！');
});

// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

public/index.html

<!DOCTYPE html>
<html>
<head>
    <title>文件上传测试</title>
</head>
<body>
    <h1>文件上传测试</h1>
    <form method="POST" action="/upload" enctype="multipart/form-data">
        <div>
            <label for="myFile">请选择上传文件：</label>
            <input type="file" name="myFile" id="myFile">
        </div>
        <button type="submit">上传</button>
    </form>
</body>
</html>

5. 运行测试

在终端输入以下命令，启动服务器：

node app.js

在浏览器中访问以下地址：

http://localhost:3000/

在文件选择框中选择一个文件，并点击“上传”按钮。上传完成后会显示“上传成功！”。

示例1：基本上传文件示例

const express = require('express');  
const multer = require('multer');  
const app = express();  
//需要配置上传文件的路径和上传文件size  
const upload = multer({ dest: 'upload' ,limits: { fileSize: 50*1024 }});  

app.get('/', function (req, res) {  
    res.sendfile('index.html');  
});  

app.post('/upload', upload.single('inputFile') ,function(req, res, next){  
    console.log(req.file);  //打印上传的文件信息

    //设置响应类型及编码，防止乱码
    res.setHeader('Content-Type','text/html;charset=utf8');
    res.end("文件上传成功："+req.file.path);  
})  
app.listen(3000);  
console.log('文件上传服务器启动成功...');

示例2：实现多文件上传

const express = require('express');
const morgan = require('morgan');
const fs = require('fs');
const multer = require('multer');

const app = express();
const PORT = process.env.PORT || 3000;
const upload = multer({ dest: 'uploads/' });

// 读取上传文件夹里的文件及删除文件，然后把文件列表显示在页面上
app.get('/', (req, res) => {
    fs.readdir(upload.dest, (err, files) => {
        if (err) throw err;
        const content = files.map(file =>
            `<li><a href="/uploads/${file}">${file}</a>
                <form action="/delete" method="post">
                    <button name="filename" value="${file}">删除</button>
                </form>
            </li>`).join('');
        res.send(`<ul>${content}</ul><br>
            <form action="/upload" method="post" enctype="multipart/form-data">
                <input type="file" name="uploadedFile" multiple>
                <button type="submit">上传</button>
            </form>`);
    });
});

// 上传文件到uploads文件夹
app.post('/upload', upload.array('uploadedFile', 10), (req, res) => {
    res.redirect('/');
});

// 删除上传文件夹里的文件
app.post('/delete', (req, res) => {
    fs.unlink(`uploads/${req.body.filename}`, (err) => {
        if (err) throw err;
        res.redirect('/');
    });
});

app.use(morgan('dev')); 
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

以上为实现“node文件上传功能简易实现代码”的完整攻略，如果还有不明确的地方，可以提出来向我询问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node文件上传功能简易实现代码 - Python技术站