RN使用react-native-image-picker + aliyun-oss-react-native上传图片

如果是原生和RN混合开发，首先执行以下代码：

yarn add react-native-image-picker
yarn add aliyun-oss-react-native

然后在Android添加依赖：
1.在android/settings.gradle里增加代码：

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

include ':aliyun-oss-react-native'
project(':aliyun-oss-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aliyun-oss-react-native/android')

2.在android/app/build.gradle里增加代码：

dependencies {
+		compile project(':react-native-image-picker')
+		compile project(':aliyun-oss-react-native')
}

3.在android/app/src/main/java/…/MainApplication.java里增加代码

package com.myapp;

+ import com.imagepicker.ImagePickerPackage;
+ import com.reactlibrary.RNAliyunOssPackage;

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
+           new ImagePickerPackage()
+ 			new RNAliyunOssPackage()
        );
    }

}

RN页面代码：

import React,{ PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { ImagePicker } from 'antd-mobile';

const RNImagePicker = require('react-native-image-picker');


export default class Demo extends PureComponent {

  state = {
      files: [],
  };
    
  uploadImage = () => {
    const { files } = this.state;
    RNImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.props.dispatch({
          type: 'demo/uploadOssFiles',
          payload: [{ ...response }],
          callback: (res = '') => {
            console.log(res, '@@@');
            this.setState({
              files: [...files, { ...response, url: response.uri }],
            });
          },
        });
      }
    });
  };

  render() {
    return (
      <View style={styles.scrollView}>
	   	  <ImagePicker 
	   	  	multiple 
	   	  	files={files} 
	   	  	onAddImageClick={this.uploadImage}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    height: '100%',
  },
});

modal层代码：

    // 图片上传
    *uploadOssFiles({ payload, callback }) {
      const proArr = payload.map(async subitem => {
      	//payload对象是array数组，首先需要遍历出来
        const fileUri = ossupload(subitem);
        return fileUri;
      });
      // 用Promise等待fileUri返回值
      const data = yield Promise.all(proArr, ret => ret);
      callback && callback(data);
    },

上传方法：

import moment from 'moment';
import AliyunOSS from 'aliyun-oss-react-native';

const endPoint = 'oss-cn-hangzhou.aliyuncs.com';
const configuration = {
  maxRetryCount: 3,
  timeoutIntervalForRequest: 30,
  timeoutIntervalForResource: 24 * 60 * 60,
};

const bucketname = 'myBucketname';
const urlCdn = 'https://myCDN.cn/';

//根据AliyunOss配置AccessKey
AliyunOSS.initWithPlainTextAccessKey('xxxxxx', 'xxxxxx', endPoint, configuration);

export const uploadOssFile = filepath => {
  const filetype = filepath.substring(filepath.lastIndexOf('.')).toLowerCase();
  //获取图片后缀

  const currm = moment(new Date());
  const oo = Math.random();
  const objectKey = `upload/assets/${currm.format('YYYYMM')}/${currm}${oo}${filetype}`;
  // 生成objectKey，作为自定义路径
  return AliyunOSS.asyncUpload(bucketname, objectKey, filepath)
    .then(() => {
      return `${urlCdn}${objectKey}`;
    })
    .catch(error => {
      console.log('=== error', error);
    });
};

AliyunOSS的具体配置请看这里

react-native-image-picker导入有问题的看这里

本文只记录一下个人的使用案例，不具有代表性 ?