![]()
react-native.jpeg
识兔，一款用来识别图片的开源项目，在未来还会添加更多有意思的东西
欢迎加入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的文章。
