React-Native 使用react-native-image-crop-picker選擇圖片并上傳到nodejs服務(wù)器

1：先學(xué)習(xí)react-native-image-crop-picke的使用方法

導(dǎo)入 react-native-image-crop-picke 
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
引用 react-native-image-crop-picke 
import ImagePicker from 'react-native-image-crop-picker';
調(diào)用 react-native-image-crop-picke的方法
//從相冊中選擇單張圖片
//cropping是否切割
ImagePicker.openPicker({
            width: 300,
            height: 300,
            cropping: true
        }).then(image => {
            
        })

//從相冊中選擇多張圖片
ImagePicker.openPicker({
            multiple: true
        }).then(images => {
            console.log(images);
        });

//拍照
ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
        });

//返回的資源對象(images)：
path(string):圖片地址
data(base64):圖片base64格式數(shù)據(jù)流
mime（string):圖片格式
width(number):圖片寬度
height(number):圖片高度
size(number):圖片大小

2：xcode添加庫和設(shè)置相冊拍照權(quán)限

找到linked frameworks and libraries導(dǎo)入庫：
RSKImageCropper.framework
QBImagePicker.framework
plist文件設(shè)置權(quán)限
訪問相機(jī):NSCameraUsageDescription   
訪問相冊：NSPhotoLibraryUsageDescription
使用效果1：
Untitled16.gif

3：上傳圖片

上傳圖片的方法
//url：params對象包含圖片本地路徑path
_uploadImage =(url, params)=> {
        return new Promise(function (resolve, reject) {
            var ary = params.path.split('/');
            console.log('2222222' + ary);
            //設(shè)置formData數(shù)據(jù)
            let formData = new FormData();
            let file = {uri: params.path, type: 'multipart/form-data', name: ary[ary.length-1]};
            formData.append("file", file);
            //fetch post請求
            fetch('http://localhost:8010/birds/' + url, {
                method: 'POST',
                //設(shè)置請求頭，請求體為json格式，identity為未壓縮
                headers: {
                    'Content-Type': 'application/json',
                    'Content-Encoding': 'identity'
                },
                body: JSON.stringify(formData),
            }).then((response) => response.json())
                .then((responseData)=> {
                    console.log('uploadImage', responseData);
                    resolve(responseData);
                })
                .catch((err)=> {
                    console.log('err', err);
                    reject(err);
                });
            });
    };
調(diào)用上傳圖片方法
//_imageObj為返回的資源對象(images)
_beginUpImage =()=> {
        let params = {
            path:  this._imageObj['path'],    //本地文件地址
        };
        this._uploadImage('uploadImage', params)
            .then( res=>{
                console.log('success');
            }).catch( err=>{
            //請求失敗
            console.log('flied');
        })
    };

完整的reactNative代碼：

import ImagePicker from 'react-native-image-crop-picker';
import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    Text,
    TouchableOpacity,
    Image
} from 'react-native';

class RNCameraView extends Component {
   //初始化一個(gè)對象，path本地路徑
    _imageObj = {
        path: '/Users/kk/XueXireactNativeDeDaiMa/SampleAppMovies/image/d11.png'
    };

    constructor(props) {
        super(props);
        this.state = {
            imageUrl: require('./image/d11.png')
        }
    }
    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#aaffaa', alignItems: 'center', justifyContent: 'center'}}>
                <Image style={{width: 300, height: 300}}
                       source={this.state.imageUrl}/>

                <TouchableOpacity style={{width: 80, height: 60, backgroundColor: '#ffaaaa', marginTop: 20}}
                                  onPress={this._openPicker}>
                    <Text>從相冊中選擇單張圖片</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width: 80, height: 60, backgroundColor: '#ffaaaa', marginTop: 20}}
                                  onPress={this._openTwoPicker}>
                    <Text>從相冊中選擇多張圖片</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width: 80, height: 60, backgroundColor: '#ffaaaa', marginTop: 20}}
                                  onPress={this._openCamera}>
                    <Text>拍照</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width: 80, height: 60, backgroundColor: '#ffaa00', marginTop: 20}}
                                  onPress={this._beginUpImage}>
                    <Text>上傳圖片</Text>
                </TouchableOpacity>
            </View>
        )
    }

    _beginUpImage =()=> {
        let params = {
            path:  this._imageObj['path'],    //本地文件地址
        };
        this.uploadImage('uploadImage', params)
            .then( res=>{
                console.log('success');
            }).catch( err=>{
            //請求失敗
            console.log('flied');
        })
    };

    uploadImage =(url, params)=> {
        return new Promise(function (resolve, reject) {
            var ary = params.path.split('/');
            console.log('2222222' + ary);
            let formData = new FormData();
            let file = {uri: params.path, type: 'multipart/form-data', name: ary[ary.length-1]};
            formData.append("file", file);

            fetch('http://localhost:8010/birds/' + url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Content-Encoding': 'identity'
                },
                body: JSON.stringify(formData),
            }).then((response) => response.json())
                .then((responseData)=> {
                    console.log('uploadImage', responseData);
                    resolve(responseData);
                })
                .catch((err)=> {
                    console.log('err', err);
                    reject(err);
                });
            });
    };

    //從相冊中選擇單張圖片：
    _openPicker =()=> {
        ImagePicker.openPicker({
            width: 300,
            height: 300,
            cropping: true
        }).then(image => {
            console.log("111111" + image['data']);
            this.setState({
                imageUrl: {uri: image['path']}
            });
            this._imageObj = image;
        })
    };
    //從相冊中選擇多張圖片：
    _openTwoPicker =()=> {
        ImagePicker.openPicker({
            multiple: true
        }).then(images => {
            console.log(images);
        });
    };
    //拍照：
    _openCamera =()=> {
        ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
        });
    };
}
AppRegistry.registerComponent('RNCameraView', ()=>RNCameraView);

4：nodejs服務(wù)端接收數(shù)據(jù)

使用express框架，并添加body-parser依賴
var express = require('express');
var app = express();
//解析請求體body
var bodyParser = require('body-parser');
//fs讀取和寫入文件
var fs = require('fs');
//解析請求體格式
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

//設(shè)置路由
app.post('/uploadImage', function (req, res) {
    console.log('Content-Type====' + req.get('Content-Type'));
    var jsonBody = req.body;
    //解析jsonBody
    var file = jsonBody['_parts'][0][1];

    console.log('jsonBody=====' + JSON.stringify(jsonBody) + 'file====' + JSON.stringify(file));

    if(Object.keys(req.body).length<=0) {
        console.log('沒有提交任何post參數(shù)');
    }

    var response;
    //設(shè)置寫入文件的路徑
    var des_file = __dirname + '/pubilc/images/' + file['name'];

    //讀取文件地址
    fs.readFile(file['uri'], function (err, data) {
        //開始寫入文件
        fs.writeFile(des_file, data, function (err) {
            if(err) {
                console.log(err);
                response = err;
            }else {
                response = {
                    message: 'File upload successfully',
                    fileName: file['name']
                }
            }
            console.log(response);
            res.end(JSON.stringify(response));
        })
    })
});

上傳圖片效果：

點(diǎn)擊上傳圖片服務(wù)端得到數(shù)據(jù)：
9D1029AB-6425-44DB-96D6-1A4A6E1C9463.png
app端收到服務(wù)端返回?cái)?shù)據(jù)：
19D33404-B4AC-49A5-B58C-F720DA63BF73.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容