react-native 实现上传功能

识兔，一款用来识别图片的开源项目，在未来还会添加更多有意思的东西

http://www.jianshu.com/p/97442b727a28

ShiTu.gif

欢迎加入QQ群397885169一起学习。

前言

在我最新开源的识兔项目中，最重要的功能就是识别图片了，而图片的识别过程如下

选中/拍摄 => 上传图片 => 后台返回识别之后的url

第一步中可能遇到的坑，在我另一篇文章有过讲解react-native-image-picker在iOS上闪退的解决办法，如果还有其他的问题，欢迎在评论区提出。
第二步就是上传图片了，在本文中会给出两种上传图片的方式。原生上传图片和使用react-native-fetch-blob实现上传图片。
第三步，需要涉及一些后台的东西和web加载的动画，我的规划是先将web的加载动画写出来，后续将nodejs后台的搭建和使用，再写点东西。

注：本文中是将图片上传到七牛云。上传到其他空间也是大同小异。

准备工作

不管是原生上传还是使用第三方上传，有个步骤都是不能省略的，那就是需要知道上传到哪，哪怕在写过要上传到七牛，但七牛那么大，具体到哪个存储空间这都是需要知道的。

在上传之前除了要知道上传的存储空间之外，还要获得七牛返回的参数，通过七牛返回的hash来真正的完成上传，但这个获取hash的过程不推荐在前端做处理，最好是放在后端（但如果非要放在前端也是没问题的，代码都是差不多的）。

下面的代码，是我开源识兔的本地服务器代码，如果遇到不明白的问题，可以在github上查看，或者加397885169一起讨论

// 引入七牛，var qiniu = require('qiniu');// 引入uuid，用它构建唯一的keyvar uuid = require('uuid');var putPolicy;// 唯一的keyvar key = uuid.v4();// 处理格式key += '.jpeg';// 通过七牛提供的方法，构建上传策略函数，imagePutPolicy就是上传的空间名putPolicy = new qiniu.rs.PutPolicy(config.qiniu.imagePutPolicy + ":" + key);var token = putPolicy.token()// 返回key和tokenreturn {    key : key,    token:token,};

七牛云配置.png

原生上传方式

// 创建form表单let body = new FormData();// token和key都是通过七牛返回的参数body.append('token',token);body.append('key',key);body.append('file',{            // 设定上传的格式            type : 'image/jpeg',            // 通过react-native-image-picker获取的图片地址            uri : uri,            name : key,        });// 开启XMLHttpRequest服务let xhr = new XMLHttpRequest();/** 上传到七牛云的地址 */let url = Config.qiniu.upload;// 开启post上传xhr.open('POST',url);// 如果正在上传,返回上传进度if (xhr.upload){    xhr.upload.onprogress = (event)=>{        if (event.lengthComputable){            let perent = event.loaded / event.total.toFixed(2);            // 打印上传进度            console.log(perent);        }    }} // 上传过成功的返回xhr.onload = ()=>{    // console.log(xhr.status);    // 状态码如果不等于200就代表错误    if (xhr.status !== 200){        alert('请求失败');        console.log(xhr.responseText);        return;    }    if (!xhr.responseText){         alert('请求失败');         console.log(xhr.responseText);         return;    }    // 服务器最后返回的数据    let response;    try{        // 将返回数据还原        response = JSON.parse(xhr.response);        console.log(response);        // ...通过返回数据做接下来的处理    }    // 发送请求    xhr.send(body);   }

react-native-fetch-blob

{    let token = data.data.token;    let key = data.data.key;    // 这里需要将'///'处理掉,因为使用wrap的时候,会再包裹一层    // 本文的fetch-blob使用的是0.10.4版本，据说其他版本不用添加下面的代码。    let PATH = iOS?response.uri.replace('file:///',''):response.uri;    // 创建上传的请求头，使用fetch-blob必须要遵循name，data的格式，要不然就不成功。    let body = [{        name:'token',data:token,    }, {        name:'key', data:key,    },{        name: 'file',        filename: key || 'file',        data: RNFetchBlob.wrap(PATH)    }];    RNFetchBlob        .fetch('POST',url,{            // 上传图片要设置Header            'Content-Type' : 'multipart/form-data',        },body)        .uploadProgress((written, total) => {            // 本地查找进度        })        .progress((received, total) => {            let perent = received / total;             // 上传进度打印            console.log(perent);        })        .then((response)=> response.json())        .then((response)=> {            // 上传信息返回            console.log(response);        })        .catch((error)=>{            // 错误信息            console.log(error);        });}

比较

原生的上传方式对于开发过原生JavaScript的人来说，其实更好理解，但对于没有写过原生js的童鞋，就需要去了解XMLHttpRequest和它的一些api才能完成上传的操作。

react-native-fetch-blob封装了上传的功能，对于开发者来说，api更简单，也更便于操作。唯一的缺点就是body必须按照官方提供的格式填写，有一点不同都会报错，作者之前就卡在这上面好长时间。

经过测试，4M以下的图片好像是获取不到上传进度的，如果有更好的解决办法，欢迎提出。

总结

本文是作者在上传图片过程中，对于两种方式的总结，可能会有写的不清楚或者不正确的地方，欢迎在评论区评论，或者加397885169一起讨论。
作者以后会书写更多有关react-native的文章。