用纯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 的小伙伴在第一时间集成七牛云的最新服务。