004-react-native--Multi-Image Select upload

Reference: http://www.jianshu.com/p/488e62ed9656

One: When using React-native-image-crop-picker for picture selection, there is no mechanism to provide multi-graphs.
When you select a picture from the camera, it overwrites the previously existing picture. So, today, a multi-image selection and upload example, in this case, will save the image you have selected previously. For example, a photo already exists in the current list, and when you go to a photo album or use a camera to take a photo, it does not overwrite the existing picture of the current list.

Second: Use Formdata to upload images and add additional parameters as needed

Three: Coding

Pic.gif

//third-party libraries that need to be introduced with NPMImport imagepicker from ' React-native-image-crop-picker '; import Actionsheet from‘.. /.. /components/actionsheet/actionsheet 'Import Config from‘.. /.. /.. /config 'Import modalprogress from‘.. /.. /components/progress/modalprogress '//Storing ArraysvarDatatopost =[];exportdefaultclass Loadingpage extends React.component {static navigationoptions= ({navigation}) = ={const {state}=navigation; return{title:' Upload information ', HeaderRight: (<Button title= "Upload"onpress={() ={state.params.commitPage (); }}                />            ),        };    }; Componentwillmount () { This. Props.navigation.setParams ({commitpage: This. Commitpage,})        } constructor (props) {super (props);  This. state={images: [],}} show () {Let items=[{title:' Choose from album ', Onpress: () = This. Openpiclib ()}, {title:' Take a picture ', onpress: () = This. Picksinglewithcamera ()},]; Let Cancelitem= {title: ' Off '};    Actionsheet.show (items, cancelitem); } render () {return(            <ScrollView> <View> <View> <view style={styl Es.viewpadding}>                            { This. Createimageitem ()}</View> </View> <view style={styles.itemline}/> &lt ;/view> </ScrollView>)} createimageitem () {Let ImageSource= require ('.. /.. /imgs/upload.png ');        Let MainView; if( This. state.images!=NULL&& This. state.images.length>=9) {MainView=NULL; }Else{MainView= <touchableopacity onpress={() ={                     This. Show (); }}> <image Source={imagesource}/> </TouchableOpacity>        }        return(            <View> <View>                    { This. state.images? This. state.images.map (i = <view key={i.uri}>{ This. RenderImage (i)}</view>): null} </View> <View>{MainView}</View> </View>        )    }   //get pictures from the cameraPicksinglewithcamera= () ={Imagepicker.opencamera ({cropping:false, Width:Math.round ((Dimensions.get (' window '). width-20) ), Height:300,        }). Then (Image={Datatopost.push ({uri:image.path, width:image.width, Heig            Ht:image.height,});  This. SetState ({images:datatopost}); }).Catch(e=alert (e)); }//get from the gallery or camera, because the Android platform is not multi-image selectable, so you need to differentiate between different platformsopenpiclib= () = {        if(Platform.os = = = ' iOS ') {Imagepicker.openpicker ({multiple:true, Waitanimationend:false,            }). Then (Images= {                 for(vari=0;i<images.length;i++) {Datatopost.push ({uri:images[i].path, Width:ima                    Ges[i].width, Height:images[i].height, Mime:images[i].mime,                }); }                 This. SetState ({images:datatopost}); }).Catch(E =alert (e)); }Else{imagepicker.openpicker ({width:300, Height:300, cropping:false, Croppercircleoverlay:false, Compressimagemaxwidth:480, Compressimagemaxheight:640, compressimagequality:0.5, mediatype:' Photo ', Compressvideopreset:' Mediumquality '}). Then (Image={Datatopost.push ({uri:image.path, width:image.width,                Height:image.height, mime:image.mime});  This. SetState ({images:datatopost}); }).Catch(E ={Alert.alert (e.message?e.message:e);        }); }} renderimage (image) {return<image style={{width:100, height:100, ResizeMode: ' Contain '}} Source={image}/>    }   //Data Submissioncommitpage= () ={Let FormData=NewFormData (); if( This. State.images = =NULL) {alert ("No Pictures selected"); } Else {             for(vari = 0;i< This. state.images.length;i++){                varURI = This. State.images[i].uri; varindex = Uri.lastindexof ("\"); varName = uri.substring (index + 1, uri.length); Let file= {Uri:uri, type: ' Multipart/form-data ', name:name}; Formdata.append (' File ', file); }        }        //when uploading a picture, you can add other relevant parameters hereFormdata.append (' userId ', ' 1 '); Formdata.append (' FileType ', ' image '); Formdata.append (' Name ', ' time '); Formdata.append (' Phone ', ' 11222222 '); Modalprogress.show ("Data crosses, please later ..."); Const Request_url= config.domain+ '/upload/uploadqualifications '; Fetch (request_url,{method:' POST ', headers:{' Content-type ': ' Multipart/form-data ',                ' Accept ': ' Application/json '}, Body:formdata,}). Then (response)= Response.json ()). then (Responsejson) ={alert (json.stringify (Responsejson)); if(Responsejson.status = = 0) {modalprogress.hide (); { This. GoBack ()}}Else{modalprogress.hide ();            alert (responsejson.msg); }        }).Catch(Error) ={alert (error);        Modalprogress.hide ();    }); }}

Image.png

Time_ erhu

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

004-react-native--Multi-Image Select upload