本文將介紹：html
- 如何使用原生 Javascript 上傳文件
- 如何使用七牛雲 SDK 上傳文件到七牛雲
在 App 中文件上傳是一個很是重要的需求，可是翻遍 React Naitve 的官方文檔沒有發現有詳細介紹文件上傳的文章，在 github上 搜索一下卻是發現了很多 repo 在作這樣的事情react
遺憾的是這項項目都是基於 native code 實現的，雖然在 React Native 使用 Native Comment 有很好的工具支持，可是終歸沒有直接使用純 JS 的庫更方便。其實 React Native 已經悄悄支持了文件上傳，咱們能夠不用引入任何依賴、從容的用幾行 JS 來解決文件上的問題。git
是否是很是簡單直白？上面這幾行代碼對應到 html 的表單相似這樣，咱們用這幾行代碼模擬了一次文件上傳的表單github
對應的 Http 請求相似以下react-native
下面詳細分析一下這幾行簡短的代碼的做用，七牛雲存儲
咱們首先建立一個 FormData 對象，FormData 對象指代一個 Form 表單對象的內容，這裏咱們只須要關注 Form 內的內容和他們的 Content-Type 就能夠了，這裏咱們添加了 key，token 和 file 這幾個 form 內容，並特別指定了 file 的 Content-Disposition 的類型是 application/octet-stream ,表明這是一個任意的二進制數據，這裏能夠是 png,jpeg 的圖片和其餘任何類型。key 和 token 是服務器須要的額外信息。key 是上傳到服務器的文件名，token 是請求令牌。最後在用fetch 提交請求的過程當中 FormData 會幫助咱們添加 Http 自己的 Content-Type等信息。服務器
這四行簡短的代碼幫助咱們構建了 Http 的 Payload，並實際提交到上傳的服務器。實際返回的服務器端響應客戶端須要處理，可使用 fetch 的 Promise API，很是方便app
這裏有個坑須要提醒一下，你們在debug返回響應的時候會發現請求在一個 Promise 結束後再也不進入第二個 Promise，再次發送請求，發現前面請求的 Promise 又繼續執行下去。這實際上是 React Native Debugger 的一個 bug，你們忽略就能夠了，在非 debug 模式就一切正常了。工具
有了以上知識咱們就能夠很容易的上傳文件到服務器了，這裏有不少小夥伴會選擇相似七牛雲存儲這種服務來加速開發，根據七牛的官方文檔構建 token 就能夠上傳了，這裏七牛也很貼心的推出了 React Native 平臺的 SDKfetch
使用 SDK 以後上傳文件就變的很是簡單了，首先是安裝
安裝以後配置本身的 AK 和 SK，這個能夠在我的中內心面找到
這裏咱們再舉一個現實世界的例子，用戶在圖片庫中選擇圖片以後上傳到七牛雲存儲，由於目前 React Native 官方還不支持從圖片庫，攝像頭等多個渠道獲取圖片，這裏的代碼使用了另一個開源庫 https://github.com/marcshilling/react-native-image-picker 。
完整demo：https://github.com/buhe/present-demo/tree/master/presentdemo
七牛做爲一家緊跟技術趨勢的雲計算公司，從 React Native 發佈以來就對該技術作了持續的跟進，在今年發佈了官方版本的存儲 SDK，幫助使用 React Native 創業的小夥伴們更便捷的使用七牛雲存儲，下降研發成本支出、專一商業模式和技術創新。七牛雲將持續發佈服務於企業的雲服務，也會在第一時間發佈 React Native 平臺的 SDK，讓使用 React Naitve 的小夥伴在第一時間集成七牛雲的最新服務。