2018-5-14 更新

完整代码：
https://github.com/1c7/react-native-upload-to-aliyun-oss

直接上结论

阿里云 Javascript SDK 和 Node SDK 都不能直接拿来用，会碰到各种问题。
阿里云没有 React Native SDK （截止至 2017年12月25号 没有）。

我参照了 阿里云的"客户端签名直传 DEMO"把签名和文件上传搞定了。

问题描述

React Native 的 App 里需要上传图片到阿里云 OSS。
阿里云的 SDK 文档里有很多不同语言的 SDK： https://help.aliyun.com/document_detail/52834.html?spm=5176.doc31947.6.659.79jFT6

• Javascript-SDK 分浏览器和 Node。
  浏览器这个是肯定没法用的了。

Node 也没法照着文档直接

npm install ali-oss

然后

var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
  region: '<Your region>',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>'
});

这样不行，用不了

背景

我不懂 iOS/Android 开发，所以用 React Native

进展

1. react-native-node
   https://github.com/staltz/react-native-node
   看起来可用，但问题是不支持 iOS，现在只有安卓。我想要一个跨平台的方案。

2. https://github.com/janeasystems/nodejs-mobile-react-native
   在看。

3. rn-nodeify
   https://github.com/tradle/rn-nodeify

4. https://github.com/lesonli/react-native-aliyun-oss

5. https://github.com/SpadeGod/react-native-aliyun-oss
   这是基于上一个 lesonli/react-native-aliyun-oss 改进的。
   安装后跑 react-native run-android 报错。
   提了个 issue:https://github.com/SpadeGod/react-native-aliyun-oss/issues/9
   在这个问题解决之前只能先 unlink + uninstall 卸载掉。

大致解决了

先随便给个代码，具体讲解之后再写

import RNFetchBlob from 'react-native-fetch-blob'
import crypto from './crypto'
import hmac from './hmac'
import sha1 from './sha1'
import Base64 from './base64'
// XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
  // GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;
export default function upload(file) {
console.log(‘upload() get paramter’);
console.log(file);
// file object from react-native-image-picker
// example:(image took in android emulator)
/* {
data: xxxx
fileName:"image-a8d8546f-7283-4ea1-bc30-6a0dc1eeb478.jpg"
fileSize:8128
height:480
isVertical:true
originalRotation:0
path:"/storage/emulated/0/Pictures/image-a8d8546f-7283-4ea1-bc30-6a0dc1eeb478.jpg"
type:"image/jpeg"
uri:"content://com.bigjpg.provider/app_images/Pictures/image-a8d8546f-7283-4ea1-bc30-6a0dc1eeb478.jpg"
width:480
}
*/
// 修改这里！！！
accessid = ‘aaa’;
accesskey = ‘bbb’;
// 计算必要的签名和其他参数等
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText))
var message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
asBytes: true
});
var signature = Crypto.util.bytesToBase64(bytes);
// 发送请求
var url = ‘https://haha-nice.oss-cn-shenzhen.aliyuncs.com’;
// var url = ‘http://bigjpg-upload.oss-cn-shenzhen.aliyuncs.com’;
RNFetchBlob.fetch(‘POST’, url, {}, [
{ name: ‘key’, data: file.fileName },
{ name: ‘policy’, data: policyBase64 },
{ name: ‘OSSAccessKeyId’, data: accessid },
{ name: ‘success_action_status’, data: ‘200’ },
{ name: ‘signature’, data: signature },
{ name: ‘file’, filename: file.fileName, type: file.type, data: file.data }
]).then((resp) => {
console.log(resp);
console.log(resp);
}).catch((err) => {
console.log(err);
})
}

注：有问题可联系 [email protected]