用純Javascript實現React Native的文件上傳

React Native 是最近兩年最值得花時間跟進的移動開發技術，這個項目始於2013年 Facebook內部的一個黑客馬拉松項目，在2014年7月以前這個項目都偏向於實驗性質，直到 廣告管理團隊想要構建一個獨立的iOS應用，然而這個團隊並無iOS開發經驗的工程師，於 是在接下來的幾個月裏廣告團隊和React Naitve團隊緊密合做，共同推動了該項目的發 展。2015年2月，iOS版本的Ads Manager在App Store發佈標誌着這個產品能夠應用在生 產環境中，接着2015年3月，在Facebook的F8大會上這一項目宣佈開源並公開了React Naitve的源碼，與此同時，Android版本的React Native和Ads Manager也在開發過程 中。2015年6月，Android版本的Ads Manager發佈到Play Store，9月14日在千呼萬喚 的期待聲中，Android版本的React Native發佈，今年剛剛結束的F8大會，微軟也擁抱 React Native，發佈他們移植React Naitve到Windows的進度和計劃，併發布了基於 React Naitve的F8 UMP。

本文將介紹：

• 如何使用原生Javascript上傳文件
• 如何使用七牛雲SDK上傳文件到七牛雲 在App中文件上傳是一個很是重要的需求，可是翻遍React Naitve的官方文檔沒有發現有 詳細介紹文件上傳的文章，在github上搜索一下卻是發現了很多repo在作這樣的事情 https://github.com/PhilippKrone/react-native-fileupload https://github.com/eduedix/react-native-networking

遺憾的是這項項目都是基於native code實現的，雖然在React Native 使用Native Comment有很好的工具支持，可是終歸沒有直接使用純JS的庫更方便。其實React Native 已經悄悄支持了文件上傳，咱們能夠不用引入任何依賴、從容的用幾行JS來解決文件上的問 題。

let formData = new FormData();
formData.append('file', {uri: uri, type: 'application/octet-stream',
name: key});
formData.append('key', key);
formData.append('token', token);
let options = {};
options.body = formData;
options.method = 'post';
return fetch(conf.UP_HOST, options).then((response) => {
});

是否是很是簡單直白？上面這幾行代碼對應到html的表單相似這樣，咱們用這幾行代碼模擬 了一次文件上傳的表單

<form method="post" action="http://upload.qiniu.com/"
enctype="multipart/form-data">
<input name="key" type="hidden" value="<resource_key>">
<input name="x:<custom_name>" type="hidden"
value="<custom_value>">
<input name="token" type="hidden" value="<upload_token>">
<input name="file" type="file" />
<input name="crc32" type="hidden" />
<input name="accept" type="hidden" />
</form>

對應的Http請求相似以下

POST / HTTP/1.1
Host: upload.qiniu.com
Content-Type: multipart/form-data; boundary=<frontier>
Content-Length: <multipartContentLength>
--<frontier>
Content-Disposition: form-data; name="token"
<uploadToken>
--<frontier>
Content-Disposition: form-data; name="key"
<key>
--<frontier>
Content-Disposition: form-data; name="<xVariableName>"
<xVariableValue>
--<frontier>
Content-Disposition: form-data; name="crc32"
<crc32>
--<frontier>
Content-Disposition: form-data; name="accept"
<acceptContentType>
--<frontier>
Content-Disposition: form-data; name="file";
filename="<fileName>"
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
<fileBinaryData>
--<frontier>--

下面詳細分析一下這幾行簡短的代碼的做用，

let formData = new FormData();
formData.append('file', {uri: uri, type: 'application/octet-stream',
name: key});
formData.append('key', key);
formData.append('token', token);

咱們首先建立一個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等信息。

let options = {};
options.body = formData;
options.method = 'post';
return fetch(conf.UP_HOST, options).then((response) => {
});

這四行簡短的代碼幫助咱們構建了Http的Payload，並實際提交到上傳的服務器。實際返回 的服務器端響應客戶端須要處理，可使用fetch的Promise API，很是方便

fetch(url).then((response) => {
return response.text();
}).then((responseText) => {
self.setState({info: responseText});
}).catch((error) => {
console.warn(error);
});

這裏有個坑須要提醒一下，你們在debug返回響應的時候會發現請求在一個Promise結束後 再也不進入第二個Promise，再次發送請求，發現前面請求的Promise又繼續執行下去。這其 實是React Native Debugger的一個bug，你們忽略就能夠了，在非debug模式就一切正 常了。 有了以上知識咱們就能夠很容易的上傳文件到服務器了，這裏有不少小夥伴會選擇相似七牛雲 存儲這種服務來加速開發，根據七牛的官方文檔構建token就能夠上傳了，這裏七牛也很貼 心的推出了 React Native 平臺的SDK

使用SDK以後上傳文件就變的很是簡單了，首先是安裝

$ npm i react-native-qiniu --save

安裝以後配置本身的AK和SK，這個能夠在我的中內心面找到

var qiniu = require('react-native-qiniu');
qiniu.conf.ACCESS_KEY = <AK>
qiniu.conf.SECRET_KEY = <SK>

這裏咱們再舉一個現實世界的例子，用戶在圖片庫中選擇圖片以後上傳到七牛雲存儲，由於目 前React Native 官方還不支持從圖片庫，攝像頭等多個渠道獲取圖片，這裏的代碼使用了 另一個開源庫 [https://github.com/marcshilling/react-native-image- picker](https://github.com/marcshilling/react-native-image- picker) 。 完整demo：[https://github.com/buhe/present-demo/tree/master/ presentdemo](https://github.com/buhe/present-demo/tree/master/ presentdemo)

七牛做爲一家緊跟技術趨勢的雲計算公司，從React Native發佈以來就對該技術作了持續 的跟進，在今年發佈了官方版本的存儲SDK，幫助使用React Native創業的小夥伴們更便 捷的使用七牛雲存儲，下降研發成本支出、專一商業模式和技術創新。七牛雲將持續發佈服務 於企業的雲服務，也會在第一時間發佈React Native平臺的SDK，讓使用React Naitve 的小夥伴在第一時間集成七牛雲的最新服務。