本文將介紹：
- 如何使用原生 Javascript 上傳文件
- 如何使用七牛雲 SDK 上傳文件到七牛雲
在 App 中文件上傳是一個非常重要的需求，但是翻遍 React Naitve 的官方文檔沒有發現有詳細介紹文件上傳的文章，在 github上 搜索一下倒是發現了不少 repo 在做這樣的事情
遺憾的是這項項目都是基於 native code 實現的，雖然在 React Native 使用 Native Comment 有很好的工具支持，但是終歸沒有直接使用純 JS 的庫更方便。其實 React Native 已經悄悄支持了文件上傳，我們可以不用引入任何依賴、從容的用幾行 JS 來解決文件上的問題。
是不是非常簡單直白？上面這幾行代碼對應到 html 的表單類似這樣，我們用這幾行代碼模擬了一次文件上傳的表單
對應的 Http 請求類似如下
下面詳細分析一下這幾行簡短的代碼的作用，
我們首先創建一個 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，非常方便
這里有個坑需要提醒一下，大家在debug返回響應的時候會發現請求在一個 Promise 結束后不再進入第二個 Promise，再次發送請求，發現前面請求的 Promise 又繼續執行下去。這其實是 React Native Debugger 的一個 bug，大家忽略就可以了，在非 debug 模式就一切正常了。
有了以上知識我們就可以很容易的上傳文件到服務器了，這里有很多小伙伴會選擇類似七牛雲存儲這種服務來加速開發，根據七牛的官方文檔構建 token 就可以上傳了，這里七牛也很貼心的推出了 React Native 平台的 SDK
使用 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 的小伙伴在第一時間集成七牛雲的最新服務。