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

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

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

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

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

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

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

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

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

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

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

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

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

    var files = event.dataTransfer.files; //通過dataTransfer對象獲取文件對象數(shù)組
    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(); //創(chuàng)建XHR實例
    request.open("POST", "/process_post"); //初始化請求
    request.send(formData);//發(fā)送請求
}

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

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

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

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

/* 
創(chuàng)建提交接口
使用中間件處理
upload.array("file")表示上傳一個名為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;
})

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

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

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

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

node formupload.js

如果沒報錯，會輸出：

應(yīng)用實例，訪問地址為 http://:::8081

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

?

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

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