使用express 4的实现文件上传

时间：2015-09-02 21:52:58 阅读：375 评论：0 收藏：0 [点我收藏+]

使用模块node-multiparty实现文件上传

由于Express 4与Express 3的在中间件的使用上具有很大的不同：许多以前内置在Express 3中的中间件，现在都需要自己通过npm进行下载，操作。今天刚好碰到一个要修改文件上传功能的中间件。所以抛弃了原有的bodyParser中间件，在gitHub上找到了node-multiparty模块，跟着API做了一个小例子，分享给大家。

首先来看客户端代码

<!DOCTYPE html>
<html>
<head>
    <title>向服务器上传文件</title>
    <meta charset="utf-8">
    <script>
        function uploadFile(){
            var formData = new FormData();
            var files = document.getElementById(‘file‘).files;
            var file = files[0];
            formData.append(‘myfile‘, file);

            var xhr = new XMLHttpRequest();
            xhr.open(‘POST‘, ‘index.html‘, true);
            xhr.onload = function (e){
                if (this.status == 200){
                     document.getElementById(‘result‘).innerHTML = this.response;
                }
            };
            xhr.send(formData);
        }
    </script>
</head>
<body>
<h1>使用bodyParser中间件上传文件</h1>
<form id = ‘form1‘ enctype="multipart/form-data">
    请选择文件<input type="file" id="file" name="file"><br>
    <input type="button" value="上传文件" onclick="uploadFile();"><br>
</form>
<output id="result"></output>
</body>
</html>

服务端代码如下：

var express = require(‘express‘);
var fs = require(‘fs‘);
var multiparty = require(‘multiparty‘);

var app = express();


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


app.post(‘/index.html‘, function (req, res){

    var form = new multiparty.Form({uploadDir: ‘./public‘});
    form.on(‘error‘, function(err) {
        console.log(‘Error parsing form: ‘ + err.stack);
    });
    form.parse(req, function (err, fields, files){
        var filesTmp = JSON.stringify(files,null,2);

        if (err){
            console.log(‘parse error: ‘ + err);
            res.send("写文件操作失败。");

        }else {
            res.send("文件上传成功");
            console.log(‘parse files: ‘ + filesTmp);

            var fileNameArr = Object.keys(files);
            var firstFilename = fileNameArr[0];
            var fileDataArr = files[firstFilename];
            console.log( typeof fileDataArr);
            console.log(fileDataArr);
            var fileData = fileDataArr[0];

            var uploadedPath = fileData.path;
            var dstPath = ‘./public/‘ + fileData.originalFilename;
            fs.rename(uploadedPath, dstPath, function(err) {
                if (err){
                    console.log("重命名文件错误："+ err);
                } else {
                    console.log("重命名文件成功。");
                }
            });
        }
    });
});

app.listen(1337, ‘127.0.0.1‘);

启动服务端：node app.js

在浏览器中输入：http://localhost:1337/index.html,你会看到如下的界面

技术分享

点击选择任意文件，然后在点击上传文件，你会看到在你的项目更目录下的public文件夹下多出了你刚才上传的文件。。

另外也可以使用multer模块来实现文件上传

使用express 4的实现文件上传

原文：http://www.cnblogs.com/duhuo/p/4779408.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)