H5拖放+FormData接口+NodeJS,完整异步文件上传(一)

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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

HTML5 拖放

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

FormData 接口

  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拖放+FormData接口+Node.js”文件上传的Demo已经跑通了,可以结自己鼓掌了。

鼓掌

结束语

  我们已经简单实现文件异步上传功能,但离实际使用场景还有差距。实际使用中,肯定不能拖放完成就马上上传,至少应该显示一个文件列表,用户可以增删文件,最后确认再开始上传。更进一步,最好可以给个进度条,显示文件上传进度。接下来,让我们继续完善,敬请期待下篇。

  如果你已经看这里,麻烦顺便点个赞咯。。。。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看