react-native 实现上传功能_rnfetchblob.wrap

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

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

前言

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

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

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

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

准备工作

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

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

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

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

原生上传方式

// 创建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的文章。