本文将介绍：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 的小伙伴在第一时间集成七牛云的最新服务。