摘要:前段時間面試過程中,頻繁遇到異步文件上傳的相關問題。所以,這會是一個拖放接口實現文件異步上傳的完整。監聽放置元素的事件,通過對象可以獲得拖拽事件的狀態及數據。后端文件接收保存后端使用實現文件上傳。
??前段時間面試過程中,頻繁遇到H5異步文件上傳的相關問題。還遇到過一個"通過H5拖放功能實現文件異步上傳"的問題,大概知道H5有新增拖拽功能可以接收文件,如何異步上傳文件就母雞了(攤手)。面試結束后,特意去看了相關知識點,了解到H5拖放+FormData接口可以實現異步上傳。為了測試文件上傳是否成功,還去看了Node.js如何接收異步文件上傳。所以,這會是一個H5拖放+FormData接口+Node.js實現文件異步上傳的完整Demo。
??先簡單介紹一下這幾個知識點,貼上詳細介紹的鏈接,有興趣的同學可以點進去多了解一些。
??拖放(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事件。
樣式代碼: 加個邊框,設置一下大小。
.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已經跑通了,可以結自己鼓掌了。
?
結束語??我們已經簡單實現文件異步上傳功能,但離實際使用場景還有差距。實際使用中,肯定不能拖放完成就馬上上傳,至少應該顯示一個文件列表,用戶可以增刪文件,最后確認再開始上傳。更進一步,最好可以給個進度條,顯示文件上傳進度。接下來,讓我們繼續完善,敬請期待下篇。
??如果你已經看這里,麻煩順便點個贊咯。。。。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93900.html
摘要:添加功能顯示待上傳文件列表支持移除待上傳文件使用顯示上傳進度支持中斷上傳方法返回一個對象,用來表示上傳的進度。監聽數據傳輸進行中通過監聽這個事件,可獲得上傳進度。 ??上一篇《H5拖放+FormData接口+NodeJS,完整異步文件上傳(一)》,我們走通了拖放文件上傳的整個流程,但離實際使用場景還有差距。這篇,我們來添加幾個實際使用場景必要的功能,向實際使用再走一步。 添加功能 顯...
摘要:添加功能顯示待上傳文件列表支持移除待上傳文件使用顯示上傳進度支持中斷上傳方法返回一個對象,用來表示上傳的進度。監聽數據傳輸進行中通過監聽這個事件,可獲得上傳進度。 ??上一篇《H5拖放+FormData接口+NodeJS,完整異步文件上傳(一)》,我們走通了拖放文件上傳的整個流程,但離實際使用場景還有差距。這篇,我們來添加幾個實際使用場景必要的功能,向實際使用再走一步。 添加功能 顯...
閱讀 466·2021-10-09 09:57
閱讀 470·2019-08-29 18:39
閱讀 811·2019-08-29 12:27
閱讀 3028·2019-08-26 11:38
閱讀 2667·2019-08-26 11:37
閱讀 1286·2019-08-26 10:59
閱讀 1377·2019-08-26 10:58
閱讀 989·2019-08-26 10:48