首页手记 H5拖放+FormDate接口+NodeJS，完整异步...

H5拖放+FormDate接口+NodeJS，完整异步文件上传（一）

标签：

Html5

前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个"通过H5拖放功能实现文件异步上传"的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试结束后，特意去看了相关知识点，了解到H5拖放+FormDate接口可以实现异步上传。为了测试文件上传是否成功，还去看了Node.js如何接收异步文件上传。所以，这会是一个H5拖放+FormDate接口+Node.js实现文件异步上传的完整Demo。
先简单介绍一下这几个知识点，贴上详细介绍的链接，有兴趣的同学可以点进去多了解一些。

HTML5 拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。抓取的对象可以是页面中DOM元素（需要设置draggable="true"）或者系统文件。监听放置元素的drop事件，通过DataTransfer对象可以获得拖拽事件的状态及数据。详情可查阅MDN的HTML5 拖放 API文档。

FormDate 接口

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。详情可查阅MDN的FormData接口文档。

后端文件接收&保存

后端使用Node.js+Express+Multer实现文件上传。Express基于 Node.js平台，快速、开放、极简的web开发框架。Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

小二，上代码

新建drop.html,插入以下代码

HTML代码: 先添加一个放置的div,并且监听ondrop和ondragover事件。

<div class="drop-area"  ondrop="drop_hander(event)" ondragover = "dragover_hander(event)"></div>

样式代码: 加个边框，设置一下大小。

.drop-area{    margin:auto;    width: 500px;    height: 500px;    border:1px pink dashed;
}

JavaScript代码: 监听拖放事件，获取文件，创建XHR实例并发送请求

/* 拖动到放置区域时 */function dragover_hander (event) {    /* 必须同时阻止dragover和drop的默认事件
       否则会响应浏览器默认行为
       浏览器能显示的文件会直接显示，例如html文件、图片文件
       浏览器不能显示的文件会出现文件下载弹窗
    */
    event.preventDefault(); 
}/*拖放完成事件*/function drop_hander (event) {

    event.preventDefault(); //阻止默认事件

    var files = event.dataTransfer.files; //通过dataTransfer对象获取文件对象数组
    var formData = new FormData(); //声明一个FormData实例

    for(var i = 0, len = files.length; i < len; i++) {        //使用append方法添加文件到file键
        formData.append('file',  files[i]);
    }    var request = new XMLHttpRequest(); //创建XHR实例
    request.open('POST', '/process_post'); //初始化请求
    request.send(formData);//发送请求}

新建formupload.js,写服务端代码：使用express创建服务，使用multer中间保存文件。 这里需要安装express和multer依赖包。这里默认你已经有简单了解Node.js，会使用npm安装依赖包。如果还没接触过，可以看看菜鸟教程的Node.js 教程,看完前四节就行。

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

/* 请求/drop.html，返回文件 */app.get('/drop.html', function (req, res) {
   res.sendFile( __dirname + "/" + "drop.html" );
})/* 
创建提交接口
使用中间件处理
upload.array('file')表示上传一个名为file文件数组
 */app.post('/process_post', upload.array('file'), function (req, res,next) { 
  if (!req.files) { // 末上传文件的返回
    res.json({ ok: false });    return;
  }  //有上传文件,返回文件列表
  res.json(req.files) 
  return;
})//启动服务，监听8081端口var server = app.listen(8081, function () { 
  var host = server.address().address  var port = server.address().port 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

到这里代码就结束了，下面是目录结构。完整代码可以查看项目github地址。注意：uploads文件夹一定要存在，否则服务会报错

h5-drop-upload
|- /uploads
|- drop.html
|- formupload
|- package.json

打开命令行，在h5-drop-upload目录下执行：

node formupload.js

如果没报错，会输出：

应用实例，访问地址为 http://:::8081

打开浏览器，输入：127.0.0.1:8081/drap.html。然后拖动文件到粉红色的框中，查看upload文件夹，你上传的文件就会这里（为了避免命名冲突，Multer 会修改上传的文件名）。到了这里还没报错，就表示整个“H5拖放+FormDate接口+Node.js”文件上传的Demo已经跑通了，可以结自己鼓掌了。