资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/用纯Javascript实现React Native的文件上传

用纯Javascript实现React Native的文件上传

JasonZhang / 1105人阅读

摘要：是上传到服务器的文件名，是请求令牌。七牛云将持续发布服务于企业的云服务，也会在第一时间发布平台的，让使用的小伙伴在第一时间集成七牛云的最新服务。

React Native 是最近两年最值得花时间跟进的移动开发技术，这个项目始于2013年Facebook内部的一个黑客马拉松项目，在2014年7月之前这个项目都偏向于实验性质，直到广告管理团队想要构建一个独立的iOS应用，然而这个团队并没有iOS开发经验的工程师，于是在接下来的几个月里广告团队和React Naitve团队紧密合作，共同推进了该项目的发展。2015年2月，iOS版本的Ads Manager在App Store发布标志着这个产品可以应用在生产环境中，接着2015年3月，在Facebook的F8大会上这一项目宣布开源并公开了ReactNaitve的源码，与此同时，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 使用NativeComment有很好的工具支持，但是终归没有直接使用纯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的表单类似这样，我们用这几行代码模拟了一次文件上传的表单

对应的Http请求类似如下

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

----

下面详细分析一下这几行简短的代码的作用，

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 = 
qiniu.conf.SECRET_KEY =

这里我们再举一个现实世界的例子，用户在图片库中选择图片之后上传到七牛云存储，因为目前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的小伙伴在第一时间集成七牛云的最新服务。

混合云 idc机房托管 React Native webrtc react native react native webrtc react-native

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79324.html

相关文章

  • 11个React Native 组件库和 Javascript 数据可视化库

    摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

    tangr206 评论0 收藏0

  • 浅谈小程序运行机制

    摘要：小程序的基础库不会被打包在某个小程序的代码包里边，它会被提前内置在微信客户端。小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后目前是分钟会被微信主动销毁当短时间内连续收到两次 写作背景 接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的。比如我在面试的时候问到一个关于小程序的问题，问小程序有window对象吗？...

    jsliang 评论0 收藏0

  • 浅谈小程序运行机制

    摘要：小程序的基础库不会被打包在某个小程序的代码包里边，它会被提前内置在微信客户端。小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后目前是分钟会被微信主动销毁当短时间内连续收到两次 写作背景 接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的。比如我在面试的时候问到一个关于小程序的问题，问小程序有window对象吗？...

    Caicloud 评论0 收藏0

  • React Native 在 Airbnb(译文)

    摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

    kevin 评论0 收藏0

  • React Native 在 Airbnb(译文)

    摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

    nihao 评论0 收藏0

发表评论

登陆后可评论

0条评论

JasonZhang

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<