nodejs + express + formidable 实现网页文件上传

1、安装 express 和 formidable新建一个目录‘UploadFiles’，然后打开命令行工具，进入该目录，逐条执行如下命令：npm initnpm install -s express formidablenpm init 运行情况如下，选型全部默认，直接回车到最后一步，过程不解释安装两个第三方组件情况如下：2、创建app.js在‘uploadfiles’目录中创建app.js文件

GamebabyRockSun_QQ

1582人浏览 · 2021-01-27 23:37:15

GamebabyRockSun_QQ · 2021-01-27 23:37:15 发布

1、安装 express 和 formidable

新建一个目录‘UploadFiles’，然后打开命令行工具，进入该目录，逐条执行如下命令：

npm init 
npm install -s express formidable

npm init 运行情况如下，选型全部默认，直接回车到最后一步，过程不解释

在这里插入图片描述
安装两个第三方组件情况如下：

在这里插入图片描述

2、创建app.js

在‘uploadfiles’目录中创建app.js文件，并添加如下代码：

var express = require('express');
var formidable = require('formidable');

var app = express();

app.get('/', function (req, res){
    res.sendFile(__dirname + '/public/index.html');
});

app.post('/', function (req, res){
    var form = new formidable.IncomingForm();

    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/uploads/' + file.name;
    });

    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);
    });

    res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000);

3、创建public、uploads目录

在 ‘uploadfile’ 目录中创建子目录 ‘public’ 和 ‘uploads’，分别用于存放前端网页和上传的文件。

4、创建前端页面index.html

在刚才新建的public目录下新建一个index.html，添加如下代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>

    <meta charset="utf-8" />
    <title>文件上传演示</title>
</head>

<body>
    <form action="/" enctype="multipart/form-data" method="post">
        <input type="file" name="upload" multiple>
        <input type="submit" value="上传">
    </form>
</body>

</html>