React Native 使用react-native-image-picker库实现图片上传功能

react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。

react-native-image-picker使用

1, 首先,安装下该插件。

npm install react-native-image-picker@latest --save

2, 针对Android和iOS平台分别进行配置

## android 平台配置

1,在android/settings.gradle文件中添加如下代码:

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

2,在android/app/build.gradle文件的dependencies中添加如下代码:

compile project(':react-native-image-picker')

3,在AndroidManifest.xml文件中添加权限:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

4,最后在MainApplication.Java文件中添加如下代码:

import com.imagepicker.ImagePickerPackage;
 new ImagePickerPackage()

这样Android环境就配置好了。

iOS平台配置

1,打开Xcode打开项目,点击根目录,右键选择 Add Files to ‘XXX’,选中项目中的该路径下的文件即可:node_modules -> react-native-image-picker -> ios -> select RNImagePicker.xcodeproj

2,添加成功后使用link命令:react-native link react-native-image-picker 。 3,打开项目依次使用Build Phases -> Link Binary With Libraries将RNImagePicker.a添加到项目依赖。

4,对于iOS 10+设备,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription。

react-native-image-picker示例

为了项目使用的方便,我们将其封装为一个组件CameraButton.js。代码如下:

import React from 'react'
import {
    TouchableOpacity,
    StyleSheet,
    Platform,
    ActivityIndicator,
    View,
    Text,
    ToastAndroid
} from 'react-native'

var ImagePicker = require('react-native-image-picker');
import Icon from 'react-native-vector-icons/Ionicons';

const options = {
    title: '选择图片', 
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照', 
    chooseFromLibraryButtonTitle: '图片库', 
    cameraType: 'back',
    mediaType: 'photo',
    videoQuality: 'high', 
    durationLimit: 10,
    maxWidth: 600,
    maxHeight: 600,
    aspectX: 2, 
    aspectY: 1,
    quality: 0.8,
    angle: 0,
    allowsEditing: false,
    noData: false,
    storageOptions: { 
        skipBackup: true, 
        path: 'images'
    }
};

class CameraButton extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loading:false
        }
    }
    render() {
        const {photos,type} = this.props;
        let conText;
        if(photos.length > 0){
            conText = (<View style={styles.countBox}>
                <Text style={styles.count}>{photos.length}</Text>
            </View>);
        }
        return (
            <TouchableOpacity
                onPress={this.showImagePicker.bind(this)}
                style={[this.props.style,styles.cameraBtn]}>
                <View>
                    <Icon name="md-camera" color="#aaa" size={34}/>
                    {conText}
                </View>
            </TouchableOpacity>
        )
    }

    showImagePicker() {
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }

            else {

                let source;

                if (Platform.OS === 'android') {
                    source = {uri: response.uri, isStatic: true}
                } else {
                    source = {uri: response.uri.replace('file://', ''), isStatic: true}
                }




                let file;
                if(Platform.OS === 'android'){
                    file = response.uri
                }else {
                    file = response.uri.replace('file://', '')
                }


                this.setState({
                    loading:true
                });
                this.props.onFileUpload(file,response.fileName||'未命名文件.jpg')
                .then(result=>{
                    this.setState({
                        loading:false
                    })
                })
            }
        });
    }
}
const styles = StyleSheet.create({
    cameraBtn: {
        padding:5
    },
    count:{
        color:'#fff',
        fontSize:12
    },
    fullBtn:{
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    countBox:{
        position:'absolute',
        right:-5,
        top:-5,
        alignItems:'center',
        backgroundColor:'#34A853',
        width:16,
        height:16,
        borderRadius:8,
        justifyContent:'center'
    }
});

export default CameraButton;

然后在需要使用的地方引入。

import CameraButton from '../../component/huar/cameraButton'


                    <CameraButton style={styles.cameraBtn}
                                  photos={[]}
                                  onFileUpload={this.onFileUpload} />
点击上传事件:
    onFileUpload(file, fileName){
        return this.props.uploadAvatar({
            id: this.props.user.ID,
            type:'logo',
            obj:'user',
            corpId: this.props.cropId
        }, file, fileName)}
 Action请求代码:
function actions(dispatch) {
    return {
        fileUrl,fileName)=>dispatch(Actions.uploadAvatar(params, fileUrl,fileName))
    }
}

actions中的uploadAvatar函数如下。

function uploadAvatar(params, fileUrl, fileName) {
    return dispatch=> {
        return UserService.uploadImage(params, fileUrl, fileName)
            .then(result=> {
                dispatch({
                    type: UPDATE_AVATAR,
                    path: result.path
                })
                return result
            })
    }
}

//UserService.uploadImage代码如下
export function uploadImage(params, fileUrl,fileName) {
    return http.uploadFile(`${config.UploadImage}`, params, fileUrl,fileName)
}

UserService函数的http异步上传图片代码如下:

let queryString = require('query-string');
import Storage from './storage'
import {
    Platform
} from 'react-native'

const os = Platform.OS;

async function uploadFile(url, params, fileUrl,fileName) {
    let Access_Token = await Storage.getItem('Access_Token');
    let data = new FormData();

    data.append('file', {
        uri: fileUrl,
        name: fileName,
        type: 'image/jpeg'
    });

    Object.keys(params).forEach((key)=> {
        if (params[key] instanceof Date) {
            data.append(key, value.toISOString())
        } else {
            data.append(key, String(params[key]))
        }
    });

    const fetchOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Access_Token': Access_Token ? Access_Token : '',
            'UserAgent':os
        },
        body: data
    };


    return fetch(url, fetchOptions)
        .then(checkStatus)
        .then(parseJSON)
}

封装上传

如果上面的实现看的比较复杂,那么我们做如下的封装:

let common_url = 'http://192.168.1.1:8080/';  //服务器地址
let token = '';   //用户登陆后返回的token

function uploadImage(url,params){
    return new Promise(function (resolve, reject) {
        let formData = new FormData();
        for (var key in params){
            formData.append(key, params[key]);
        }
        let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
        formData.append("file", file);
        fetch(common_url + url, {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8',
                "x-access-token": token,
            },
            body: formData,
        }).then((response) => response.json())
            .then((responseData)=> {
                console.log('uploadImage', responseData);
                resolve(responseData);
            })
            .catch((err)=> {
                console.log('err', err);
                reject(err);
            });
    });
}

然后在使用的地方:

let params = {
    userId:'abc12345',   //用户id
    path:'file:///storage/emulated/0/Pictures/image.jpg'    //本地文件地址
}
uploadImage('app/uploadFile',params )
    .then( res=>{
        //请求成功
        if(res.header.statusCode == 'success'){
            //这里设定服务器返回的header中statusCode为success时数据返回成功
            upLoadImgUrl = res.body.imgurl;  //服务器返回的地址
        }else{
             //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
            console.log(res.header.msgArray[0].desc);
        }
    }).catch( err=>{ 
         //请求失败
    })

附:http://lib.csdn.net/article/reactnative/58022?knId=1415 使用fetch+formData实现图片上传

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS开发UI之日期控件的使用(UIDatePicker)

@property (nonatomic) UIDatePickerMode datePickerMode; 

982
来自专栏学海无涯

iOS开发之UIRefreshControl使用踩坑

问题描述 接上一个话题,实现了TabBar的点击刷新以后,开始继续写完成功能,刷新UITableView,于是考虑到iOS 10以后,UIScrollView已...

35710
来自专栏前端知识分享

第159天:前端知识体系框架

Web Components:http://css-tricks.com/modular-future-web-components//

1423
来自专栏微信公众号:Java团长

Java Web学习总结(八)——HttpServletResponse对象(二)

请求重定向指:一个web资源收到客户端请求后,通知客户端去访问另外一个web资源,这称之为请求重定向。

1142
来自专栏我和未来有约会

从Flash到Silverlight进阶教程-用代码来创建动画

从Flash到Silverlight进阶教程 用代码来创建动画 这节里将要讲述一个自定义用户控件最基本的操作,就好象Flash中的MovieClips一样,动态...

3745
来自专栏子勰随笔

开发中一些常用的工具链接(MD5、Timestamp等)

23910
来自专栏mukekeheart的iOS之旅

iOS项目——基本框架搭建

项目开发过程中,在完成iOS项目——项目开发环境搭建之后,我们首先需要考虑的就是我们的项目的整体框架与导航架构设计,然后在这个基础上考虑功能模块的完成。 一 ...

4578
来自专栏c#开发者

datagrid资料+ by iCeSnaker - Program rhapsody

datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.c...

3649
来自专栏IMWeb前端团队

用Flux实现TodoMVC

本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github 下载。...

2135
来自专栏ionic3+

svg平移缩放

svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手...

1552

扫码关注云+社区

领取腾讯云代金券