摘要：前段時(shí)間面試過(guò)程中，頻繁遇到異步文件上傳的相關(guān)問(wèn)題。所以，這會(huì)是一個(gè)拖放接口實(shí)現(xiàn)文件異步上傳的完整。監(jiān)聽(tīng)放置元素的事件，通過(guò)對(duì)象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實(shí)現(xiàn)文件上傳。

??前段時(shí)間面試過(guò)程中，頻繁遇到H5異步文件上傳的相關(guān)問(wèn)題。還遇到過(guò)一個(gè)"通過(guò)H5拖放功能實(shí)現(xiàn)文件異步上傳"的問(wèn)題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試結(jié)束后，特意去看了相關(guān)知識(shí)點(diǎn)，了解到H5拖放+FormData接口可以實(shí)現(xiàn)異步上傳。為了測(cè)試文件上傳是否成功，還去看了Node.js如何接收異步文件上傳。所以，這會(huì)是一個(gè)H5拖放+FormData接口+Node.js實(shí)現(xiàn)文件異步上傳的完整Demo。
??先簡(jiǎn)單介紹一下這幾個(gè)知識(shí)點(diǎn)，貼上詳細(xì)介紹的鏈接，有興趣的同學(xué)可以點(diǎn)進(jìn)去多了解一些。

??拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。抓取的對(duì)象可以是頁(yè)面中DOM元素（需要設(shè)置draggable="true"）或者系統(tǒng)文件。監(jiān)聽(tīng)放置元素的drop事件，通過(guò)DataTransfer對(duì)象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。詳情可查閱MDN的HTML5 拖放 API文檔。

??XMLHttpRequest Level 2添加了一個(gè)新的接口FormData。利用FormData對(duì)象，我們可以通過(guò)JavaScript用一些鍵值對(duì)來(lái)模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來(lái)異步的提交這個(gè)"表單"。比起普通的ajax，使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。詳情可查閱MDN的FormData接口文檔。

??后端使用Node.js+Express+Multer實(shí)現(xiàn)文件上傳。Express基于 Node.js平臺(tái)，快速、開(kāi)放、極簡(jiǎn)的web開(kāi)發(fā)框架。Multer 是一個(gè) node.js 中間件，用于處理 multipart/form-data 類型的表單數(shù)據(jù)，它主要用于上傳文件。

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

HTML代碼: 先添加一個(gè)放置的div,并且監(jiān)聽(tīng)ondrop和ondragover事件。

樣式代碼: 加個(gè)邊框，設(shè)置一下大小。

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

JavaScript代碼: 監(jiān)聽(tīng)拖放事件，獲取文件，創(chuàng)建XHR實(shí)例并發(fā)送請(qǐng)求

/* 拖動(dòng)到放置區(qū)域時(shí) */
function dragover_hander (event) {
    /* 必須同時(shí)阻止dragover和drop的默認(rèn)事件
       否則會(huì)響應(yīng)瀏覽器默認(rèn)行為
       瀏覽器能顯示的文件會(huì)直接顯示，例如html文件、圖片文件
       瀏覽器不能顯示的文件會(huì)出現(xiàn)文件下載彈窗
    */
    event.preventDefault(); 
}

/*拖放完成事件*/
function drop_hander (event) {

    event.preventDefault(); //阻止默認(rèn)事件

    var files = event.dataTransfer.files; //通過(guò)dataTransfer對(duì)象獲取文件對(duì)象數(shù)組
    var formData = new FormData(); //聲明一個(gè)FormData實(shí)例

    for(var i = 0, len = files.length; i < len; i++) {
        //使用append方法添加文件到file鍵
        formData.append("file",  files[i]);
    }

    var request = new XMLHttpRequest(); //創(chuàng)建XHR實(shí)例
    request.open("POST", "/process_post"); //初始化請(qǐng)求
    request.send(formData);//發(fā)送請(qǐng)求
}

新建formupload.js,寫(xiě)服務(wù)端代碼：使用express創(chuàng)建服務(wù)，使用multer中間保存文件。 這里需要安裝express和multer依賴包。這里默認(rèn)你已經(jīng)有簡(jiǎn)單了解Node.js，會(huì)使用npm安裝依賴包。如果還沒(méi)接觸過(guò)，可以看看菜鳥(niǎo)教程的Node.js 教程,看完前四節(jié)就行。

const express = require("express"); //引入express模塊
const app = express(); //創(chuàng)建一個(gè)express應(yīng)用
const multer = require("multer"); // 引入multer模塊

/*
 新建一個(gè)multer中間件，設(shè)置文件保存路徑
 路徑必須存在，否則會(huì)報(bào)錯(cuò)
*/
const upload = multer({ dest: "uploads/" }); 

/* 請(qǐng)求/drop.html，返回文件 */
app.get("/drop.html", function (req, res) {
   res.sendFile( __dirname + "/" + "drop.html" );
})

/* 
創(chuàng)建提交接口
使用中間件處理
upload.array("file")表示上傳一個(gè)名為file文件數(shù)組
 */
app.post("/process_post", upload.array("file"), function (req, res,next) {
 
  if (!req.files) { // 末上傳文件的返回
    res.json({ ok: false });
    return;
  }
  //有上傳文件,返回文件列表
  res.json(req.files) 
  return;
})

//啟動(dòng)服務(wù)，監(jiān)聽(tīng)8081端口
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應(yīng)用實(shí)例，訪問(wèn)地址為 http://%s:%s", host, port)
 
})

到這里代碼就結(jié)束了，下面是目錄結(jié)構(gòu)。完整代碼可以查看項(xiàng)目github地址。注意：uploads文件夾一定要存在，否則服務(wù)會(huì)報(bào)錯(cuò)

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

打開(kāi)命令行，在h5-drop-upload目錄下執(zhí)行：

node formupload.js

如果沒(méi)報(bào)錯(cuò)，會(huì)輸出：

應(yīng)用實(shí)例，訪問(wèn)地址為 http://:::8081

打開(kāi)瀏覽器，輸入：127.0.0.1:8081/drap.html。然后拖動(dòng)文件到粉紅色的框中，查看upload文件夾，你上傳的文件就會(huì)這里（為了避免命名沖突，Multer 會(huì)修改上傳的文件名）。到了這里還沒(méi)報(bào)錯(cuò)，就表示整個(gè)“H5拖放+FormData接口+Node.js”文件上傳的Demo已經(jīng)跑通了，可以結(jié)自己鼓掌了。

?

??我們已經(jīng)簡(jiǎn)單實(shí)現(xiàn)文件異步上傳功能，但離實(shí)際使用場(chǎng)景還有差距。實(shí)際使用中，肯定不能拖放完成就馬上上傳，至少應(yīng)該顯示一個(gè)文件列表，用戶可以增刪文件，最后確認(rèn)再開(kāi)始上傳。更進(jìn)一步，最好可以給個(gè)進(jìn)度條，顯示文件上傳進(jìn)度。接下來(lái)，讓我們繼續(xù)完善，敬請(qǐng)期待下篇。

??如果你已經(jīng)看這里，麻煩順便點(diǎn)個(gè)贊咯。。。。