nodejs+HTML5+express+mluter实现文件上传效果

本文链接：https://blog.csdn.net/q918922703_1/article/details/103216351

2HTML页面代码

<style type="text/css">
        .drop{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <script>
        function drop_hander(event){
            event.preventDefault();//阻止默认事件;
            var files = event.dataTransfer.files;//通过dataTransfer.files来获取文件对象的数组
            var formData=new FormData();
            console.log(formData);
            for (let i = 0,len=files.length;i<len; i++) {
                console.log(files[i]);
                formData.append("file",files[i]);  
            }
            var request = new XMLHttpRequest(); //创建XHR实例
            request.open('POST', '/process_post'); //初始化请求
            request.send(formData);//发送请求
        }
        function dragover_hander(event){
            event.preventDefault();
            /* 必须同时阻止dragover和drop的默认事件
                否则会响应浏览器默认行为
                浏览器能显示的文件会直接显示，例如html文件、图片文件
                 浏览器不能显示的文件会出现文件下载弹窗
             */
        }
    </script>
</head>
<body>
    <div class="drop" ondrop="drop_hander(event)" ondragover="dragover_hander(event)">

    </div>
</body>

服务器端的js代码

const express=require("express");
const app=express();
const multer=require("multer");
//引入包文件
const update=multer({dest:'uploads/'})
/*
 新建一个multer中间件，设置文件保存路径
 路径必须存在，否则会报错
*/

// 请求/drop.html,返回文件
app.get('/drop.html',function(req,res){
    res.sendFile(__dirname+'/'+'drop.html');
});

/*
创建提交接口，使用中间件处理，update.array（‘file’）上传一个名为file的文件数组
 */
app.post('/process_post',update.array('file'),function(req,res,next){
    if (!req.files) { // 末上传文件的返回
        res.json({ ok: false });
        return;
      }
      //有上传文件,返回文件列表
      res.json(req.files) 
      return;
});

var server=app.listen(8081,function(){
    var host = server.address().address
    var port = server.address().port
    console.log("应用实例，访问地址为 http://%s:%s", host, port);
})