React Native 上传图片到阿里云 OSS (2017年)
已解决。但我之后再贴代码,先去忙了~
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
进展
-
react-native-node
https://github.com/staltz/react-native-node
看起来可用,但问题是不支持 iOS,现在只有安卓。我想要一个跨平台的方案。 -
https://github.com/janeasystems/nodejs-mobile-react-native
在看。 -
rn-nodeify
https://github.com/tradle/rn-nodeify -
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]