摘要：是上傳到服務(wù)器的文件名，是請(qǐng)求令牌。七牛云將持續(xù)發(fā)布服務(wù)于企業(yè)的云服務(wù)，也會(huì)在第一時(shí)間發(fā)布平臺(tái)的，讓使用的小伙伴在第一時(shí)間集成七牛云的最新服務(wù)。

React Native 是最近兩年最值得花時(shí)間跟進(jìn)的移動(dòng)開(kāi)發(fā)技術(shù)，這個(gè)項(xiàng)目始于2013年Facebook內(nèi)部的一個(gè)黑客馬拉松項(xiàng)目，在2014年7月之前這個(gè)項(xiàng)目都偏向于實(shí)驗(yàn)性質(zhì)，直到廣告管理團(tuán)隊(duì)想要構(gòu)建一個(gè)獨(dú)立的iOS應(yīng)用，然而這個(gè)團(tuán)隊(duì)并沒(méi)有iOS開(kāi)發(fā)經(jīng)驗(yàn)的工程師，于是在接下來(lái)的幾個(gè)月里廣告團(tuán)隊(duì)和React Naitve團(tuán)隊(duì)緊密合作，共同推進(jìn)了該項(xiàng)目的發(fā)展。2015年2月，iOS版本的Ads Manager在App Store發(fā)布標(biāo)志著這個(gè)產(chǎn)品可以應(yīng)用在生產(chǎn)環(huán)境中，接著2015年3月，在Facebook的F8大會(huì)上這一項(xiàng)目宣布開(kāi)源并公開(kāi)了ReactNaitve的源碼，與此同時(shí)，Android版本的React Native和Ads Manager也在開(kāi)發(fā)過(guò)程中。2015年6月，Android版本的Ads Manager發(fā)布到Play Store，9月14日在千呼萬(wàn)喚的期待聲中，Android版本的React Native發(fā)布，今年剛剛結(jié)束的F8大會(huì)，微軟也擁抱React Native，發(fā)布他們移植React Naitve到Windows的進(jìn)度和計(jì)劃，并發(fā)布了基于React Naitve的F8 UMP。

本文將介紹：

如何使用原生Javascript上傳文件

如何使用七牛云SDK上傳文件到七牛云
在App中文件上傳是一個(gè)非常重要的需求，但是翻遍React Naitve的官方文檔沒(méi)有發(fā)現(xiàn)有詳細(xì)介紹文件上傳的文章，在github上搜索一下倒是發(fā)現(xiàn)了不少repo在做這樣的事情

https://github.com/PhilippKrone/react-native-fileupload

https://github.com/eduedix/react-native-networking

遺憾的是這項(xiàng)項(xiàng)目都是基于native code實(shí)現(xiàn)的，雖然在React Native 使用NativeComment有很好的工具支持，但是終歸沒(méi)有直接使用純JS的庫(kù)更方便。其實(shí)React Native已經(jīng)悄悄支持了文件上傳，我們可以不用引入任何依賴(lài)、從容的用幾行JS來(lái)解決文件上的問(wèn)題。

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) => {
});

是不是非常簡(jiǎn)單直白？上面這幾行代碼對(duì)應(yīng)到html的表單類(lèi)似這樣，我們用這幾行代碼模擬了一次文件上傳的表單

對(duì)應(yīng)的Http請(qǐng)求類(lèi)似如下

POST / HTTP/1.1
Host: upload.qiniu.com
Content-Type: multipart/form-data; boundary=
Content-Length: 
--
Content-Disposition: form-data; name="token"

--
Content-Disposition: form-data; name="key"

--
Content-Disposition: form-data; name=""

--
Content-Disposition: form-data; name="crc32"

--
Content-Disposition: form-data; name="accept"

--
Content-Disposition: form-data; name="file";
filename=""
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary

----

下面詳細(xì)分析一下這幾行簡(jiǎn)短的代碼的作用，

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

我們首先創(chuàng)建一個(gè)FormData對(duì)象，F(xiàn)ormData對(duì)象指代一個(gè)Form表單對(duì)象的內(nèi)容，這里我們只需要關(guān)注Form內(nèi)的內(nèi)容和他們的Content-Type就可以了，這里我們添加了key，token和file這幾個(gè)form內(nèi)容，并特別指定了file的Content-Disposition的類(lèi)型是application/octet-stream ,代表這是一個(gè)任意的二進(jìn)制數(shù)據(jù)，這里可以是png,jpeg的圖片和其他任何類(lèi)型。key和token是服務(wù)器需要的額外信息。key是上傳到服務(wù)器的文件名，token是請(qǐng)求令牌。最后在用fetch提交請(qǐng)求的過(guò)程中FormData會(huì)幫助我們添加Http本身的Content-Type等信息。

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

這四行簡(jiǎn)短的代碼幫助我們構(gòu)建了Http的Payload，并實(shí)際提交到上傳的服務(wù)器。實(shí)際返回的服務(wù)器端響應(yīng)客戶(hù)端需要處理，可以使用fetch的Promise API，非常方便

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

這里有個(gè)坑需要提醒一下，大家在debug返回響應(yīng)的時(shí)候會(huì)發(fā)現(xiàn)請(qǐng)求在一個(gè)Promise結(jié)束后不再進(jìn)入第二個(gè)Promise，再次發(fā)送請(qǐng)求，發(fā)現(xiàn)前面請(qǐng)求的Promise又繼續(xù)執(zhí)行下去。這其實(shí)是React Native Debugger的一個(gè)bug，大家忽略就可以了，在非debug模式就一切正常了。

有了以上知識(shí)我們就可以很容易的上傳文件到服務(wù)器了，這里有很多小伙伴會(huì)選擇類(lèi)似七牛云存儲(chǔ)這種服務(wù)來(lái)加速開(kāi)發(fā)，根據(jù)七牛的官方文檔構(gòu)建token就可以上傳了，這里七牛也很貼心的推出了 React Native 平臺(tái)的SDK

使用SDK之后上傳文件就變的非常簡(jiǎn)單了，首先是安裝

$ npm i react-native-qiniu --save

安裝之后配置自己的AK和SK，這個(gè)可以在個(gè)人中心里面找到

var qiniu = require("react-native-qiniu");
qiniu.conf.ACCESS_KEY = 
qiniu.conf.SECRET_KEY = 

這里我們?cè)倥e一個(gè)現(xiàn)實(shí)世界的例子，用戶(hù)在圖片庫(kù)中選擇圖片之后上傳到七牛云存儲(chǔ)，因?yàn)槟壳癛eact Native 官方還不支持從圖片庫(kù)，攝像頭等多個(gè)渠道獲取圖片，這里的代碼使用了另外一個(gè)開(kāi)源庫(kù)
https://github.com/marcshilling/react-native-image-picker
完整demo：
https://github.com/buhe/present-demo/tree/master/presentdemo

七牛作為一家緊跟技術(shù)趨勢(shì)的云計(jì)算公司，從React Native發(fā)布以來(lái)就對(duì)該技術(shù)做了持續(xù)的跟進(jìn)，在今年發(fā)布了官方版本的存儲(chǔ)SDK，幫助使用React Native創(chuàng)業(yè)的小伙伴們更便捷的使用七牛云存儲(chǔ)，降低研發(fā)成本支出、專(zhuān)注商業(yè)模式和技術(shù)創(chuàng)新。七牛云將持續(xù)發(fā)布服務(wù)于企業(yè)的云服務(wù)，也會(huì)在第一時(shí)間發(fā)布React Native平臺(tái)的SDK，讓使用React Naitve的小伙伴在第一時(shí)間集成七牛云的最新服務(wù)。