基於Web和二維碼的文件傳輸服務

在工作中難免需要對外提供一些我們抓取的log或者操作視頻之類的資料，但由於工作環境日漸規範和嚴格，公司的網絡環境和客戶的網絡環境是被獨立開來的。這樣做的好處不必多說，但同時也給我們工作帶來的諸多不便。客戶的網絡無法訪問萬維網，就無法對外輸出資料。但程序員們是不會被困難打到的，於是就有了下面這個對外輸出資料的流程：


 


1.將資料push進手機


2.在手機端下載網盤並登錄


3.上傳資料


4.在公司的內網登錄網盤 


5.從網盤下載資料


6.對外輸出資料


    完美。使用這六個步驟完全解決了對外輸出資料的難題，但隨着時間的推移我們慢慢會發現，手裏的手機經常要刷機，每次一刷機，之前裝的網盤工具就沒有了。於是我們會重複做第【2】個步驟，這種重複就跟被罰抄寫單詞一樣乏味。


 


    記得曾經聽過這麼一句話“一切輸入都是罪惡的”。意思就是在軟件設計和開發當中，儘量避免讓用戶做輸入操作而多讓用戶做選擇操作。重複的輸入操作會讓用戶產生疲憊。而在上述六個步驟中【2】【4】都有登錄操作。


##靈感來源


 


    支付寶有一個功能就是在當前的瀏覽器端不支持支付寶的插件的情況下，只需要掃描頁面上的二維碼便可以使用手機端支付，手機端支付完成後瀏覽器端的頁面會自動刷新並顯示付款成功。


 


    那麼支付寶的這個功能能給我們帶來怎麼樣的啓示呢？是否有這麼一種情形：我們在手機瀏覽器上上傳一份資料，接着不需要我們做任何事情，那份資料自動出現在另一個瀏覽器的頁面上，我們只需要下載下來便可。


##具體實現


 


    在手機瀏覽器上傳一個文件A後會暫存在了服務器的磁盤上，這時另一個瀏覽器端要如何得知它所需要A文件已經存在於服務器磁盤上了？如果不需要用戶登錄，也不需要用戶輸入什麼信息的話怎麼去唯一識別和定位這個文件呢？這裏我想到了二維碼，將二維碼作爲服務器，手機端，PC端瀏覽器之間信息交流的“信使”。


 


“信使”飛行流程如下：




 


1.瀏覽器請求www.contentshell.com


2.服務器會根據當前請求返回一個唯一的ID（信使），然後將這個ID信息存儲進二維碼並返回給PC端的瀏覽器


3.PC端瀏覽器接受到響應後將二維碼顯示在屏幕上並通過ID信息不間斷的查詢server是否存在這個文件，如果存在則將該文件的下載鏈接顯示到瀏覽器上。


4.手機端掃描二維碼，通過二維碼獲得該唯一ID


5.選擇指定文件並且將該文件同【4】中獲得的ID一併上傳給server，server接收到mobile傳遞上來的文件後會根據ID來給文件命名


6.當【5】完成後，PC端瀏覽器就能成功從server查詢到ID對應的文件並將該文件的下載鏈接顯示在網頁上。


##技術堆棧


 


1.bootstrap框架搭建前臺頁面


2.node js編寫後臺服務器代碼


 


##最終設計效果




 


使用contentshell上傳文件步驟：


1.將資料push進手機


2.掃描二維碼


3.上傳資料


4.下載資料


5.對外輸出資料


##可擴展內容


 


1.使用數據庫進行文件數據保存。


2.支持文件持久保存和文件一次性使用即毀。


3.支持文件分享功能。


4.支持大文件斷點上傳。