nodejs实现文件上传查询

项目目录

1. files目录下存放文件；

2. public目录存放静态文件，例如html文件

<html>
<head>
    <meta charset="utf-8">
    <title>look_for_files</title>
    <style>
        a {
            cursor: pointer;
        }

        .container {
            margin-top: 30px;
            margin-left: 40px;
        }

        .key {
            width: 253px;
            height: 40px;
            font-size: 100%;
        }
        .sub{
             width:60px;
             height:40px;
             cursor:pointer;
             border:0px;
             background: #c5dbf2;
             //background:#ddffff;
        }
        .tear{
             width:80%;
             height:70%;
             margin-top:5px;
        }
        .file_name{
            font-size: 16px;
            /*display:none;*/
        }
        .show{
            margin-top: 10px;
        }
        button {
            height: 40px;
            margin-left: 5px;
            font-size: 14px;
            background-color: #c5dbf2;
            border: none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" >
        function searchfile() {
            document.getElementsByClassName("sub")[1].style.background="#dddddd";
            var key = document.getElementsByName("keyword");

            // get
            var xhr = new XMLHttpRequest();

            xhr.open('GET', 'http://127.0.0.1:8080/search_file?keyword='+key[0].value);
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200)
                    {
                    document.getElementsByClassName("sub")[1].style.background="#c5dbf2";
                    document.getElementsByClassName("tear")[0].innerHTML=JSON.parse(xhr.responseText).data;
                    document.getElementsByClassName("file_name")[0].innerHTML=JSON.parse(xhr.responseText).name;
                    }
            };
            xhr.send();

        }
    </script>
</head>
<body>

<form action='/file_upload' method='POST' enctype='multipart/form-data' >
 <div class="container">
    <h3>上传文件</h3>
    <input class='keyword' type='file' name='image'>
    <input class='sub' type='submit' value='上传'>
    </div>
</form>
<form method='GET' action="javascript:searchfile()">
 <div class="container">
    <div class="search">
        <h3>查询文件</h3>
        <input class='key' type="text" name="keyword" placeholder="请输入文件名">
        <input class='sub' type="submit" value='查询'>
    </div>
    <div class="show">
        <!--<h3>展示内容</h3>-->
        <span class=file_name>文件名</span></br>
        <textarea class='tear'></textarea>
    </div>
</div>
</form>
</body>
</html>
前端代码search.html
//引入框架
var express=require('express');
var app=express();
//定义文件对象
var fs=require('fs');
//编码
var iconv=require('iconv-lite');
//中间件
var bodyParser=require('body-parser');
//文件上传中间组件
var multer=require('multer');
//引入path模块
var path = require('path');

//定义静态文件路径
console.log('the current : ', __dirname);
var public_path=path.join(__dirname,'public');
app.use(express.static(public_path));
app.use(bodyParser.urlencoded({extended:false}));
//定义文件储存路径
var file_path=path.join(__dirname,'files/');
//文件路径,处理对象
//app.use(multer({dest:'files/'}).array('image'));
app.use(multer({dest:file_path}).array('image'));

//查询文件
app.get('/search_file',function(req,res){
    //读取get请求参数
    console.log(req.query);     
    parm=req.query.keyword;
    console.log(parm);
    //如果参数为空
    if (parm===undefined){
        res.send({data:'dont hava file', status:'error'});
    }
    //else{
    //let path='./app2.0/files/';
        fs.readdir(file_path, function(err,files){
            if(err){
                return console.error('the error is : ',err);
            }
            console.log('the files are : ', files);
            
            for(let i=0,len=files.length;i<len;i++){
                let file = files[i],
                flag= file.match(parm);
                console.log('the flag is:', flag);
                if (flag){
                    console.log('文件名：'+file);
                    //let data = fs.readFileSync(file_path+file,'utf8',);
                    //编码start
                    let fileStr=fs.readFileSync(file_path+file);
                    var data = iconv.decode(fileStr, 'GBK');
                    //编码end
                    //console.log(res.send({name:file,data:data.toString()}));
                    return res.send({name:file,data:data.toString()});
                    return;
                }
            }
        });

    //}
})
//上传文件
app.post('/file_upload', function (req, res) {
    var file=req.files[0];
    var des_file=__dirname+"/files/"+file.originalname;
    console.log(file);
    fs.writeFileSync(des_file,fs.readFileSync(file.path));
    fs.unlinkSync(__dirname+"/files/"+file.filename);
    response = {
        message:'File uploaded successfully', 
        filename:file.originalname
    };
    res.json(response);
}) ;


var server=app.listen(8080,'127.0.0.1',function(){
     var host=server.address().address;
     var port=server.address().port;
    //var host = '127.0.0.1';
    //var port = '8080';
    console.log('访问地址为http://%s:%s',host,port)
})
后端nodejs代码

 总结：

1. 读取文件，汉字读取乱码。windows 上的文件一般都是gbk编码，用utf8读的话，当然是乱码了。
解决方法：GBK 编码不在NodeJS自身支持范围内。因此，一般我们借助 iconv-lite
2. for循环，闭包？nodejs一切都是异步，异步操作，其他语言大都是同步操作
3. 静态文件的路径需要设置为nodejs的相对路劲
4. 在新的js规范ES6中，新增了let 命令，用来声明变量。用法类似于var，但不同的是所声明的变量，只在let 命令所在的代码块内效

5. cnpm 安装 npm是node package manager

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本

6. 定义变量的三个关键字：var：正常  let：区域内的量  const:常量

posted @ 2018-11-17 17:23  非非不可  阅读(188)  评论(0)    收藏  举报