react如何实现图片选择

react-native-image-crop-picker图片选择并裁减//这个看需求使用
https://github.com/ivpusic/react-native-image-crop-picker
react-native-image-picker图片选择
https://github.com/react-native-image-picker/react-native-image-picker
react-native-qiniu
https://github.com/buhe/react-native-qiniu

import{launchCamera,launchImageLibrary,ImageLibraryOptions,PhotoQuality}from'react-native-image-picker';
/**
*从相册选择图片；
*sourceType:'camera'打开相机拍摄图片
**/
exportasyncfunctionchooseImage(options:{
count?:number,
quality?:PhotoQuality
sourceType?:'camera',//默认'album'
}={}){
returnnewPromise(async(resolve,reject)=>{
constOpts:ImageLibraryOptions={
mediaType:'photo',
quality:options.quality||1,
selectionLimit:options.count||1
};
constresult=options.sourceType=='camera'?
awaitlaunchCamera(Opts):
awaitlaunchImageLibrary(Opts);
resolve(result)
})
}
/**
*从相册选择视频；
*sourceType:'camera'打开相机拍摄视频
**/
exportasyncfunctionchooseVideo(options:{
count?:number,
quality?:'low'|'high'
sourceType?:'camera',//默认'album'
}={}){
returnnewPromise(async(resolve,reject)=>{
constOpts:ImageLibraryOptions={
mediaType:'video',
videoQuality:options.quality,
selectionLimit:options.count||1
};
constresult=options.sourceType=='camera'?
awaitlaunchCamera(Opts):
awaitlaunchImageLibrary(Opts);
resolve(result)
})
}

classqiniuUpload{
privateUP_HOST='http://upload.qiniu.com';
//privateRS_HOST='http://rs.qbox.me';
//privateRSF_HOST='http://rsf.qbox.me';
//privateAPI_HOST='http://api.qiniu.com';
publicupload=async(uri:string,key:string,token:string)=>{
returnnewPromise((resolve,reject)=>{
letformData=newFormData();
formData.append('file',{uri:uri,type:'application/octet-stream',name:key});
formData.append('key',key);
formData.append('token',token);

letoptions:any={
body:formData,
method:'post',
};
fetch(this.UP_HOST,options).then((response)=>{
resolve(response)
}).catch(error=>{
console.error(error)
resolve(null)
});
})
}
//...后面再加别的功能
}
constqiniu=newqiniuUpload();
exportdefaultqiniu;
importqiniufrom'@/modules/qiniu/index'
...
/**
*上传视频图片
*/
uploadFile:async(filePath:string)=>{
constres=awaitcreateBaseClient('GET','/v1/file')();//这是接口请求方法，用来拿后端的七牛token、key

if(!res){
returnres;
}
const{key,token}=res;
constfileSegments=filePath.split('.');
constfileKey=key+'.'+fileSegments[fileSegments.length-1];
try{
constresult=awaitqiniu.upload(filePath,fileKey,token)
if(result&&result.ok){
return{
url:ASSET_HOST+'/'+fileKey,//ASSET_HOST是资源服务器域名前缀
};
}else{
returnnull
}
}catch(error){
returnnull;
}
},
...

importReactfrom'react'
import{
ViewStyle,
StyleProp,
ImageURISource,
ActivityIndicator
}from'react-native'
importBasefrom'@/components/Base';
import{Image,View,Text}from'@/components';//Image封装过的，所以有些属性不一样
importActionSheetfrom"@/components/Feedback/免费云主机、域名ActionSheet";//自己封装
importstylesfrom'./styleCss';//样式就不放上来了
interfaceProps{
type?:'video'
src?:string[]
count?:number
btnPath?:ImageURISource
style?:StyleProp
itemStyle?:StyleProp
itemWidth?:number
itemHeight?:number//默认正方形
onChange?:(e)=>void
}
interfaceState{
imageUploading:boolean
images:string[]
}
/**
*多图上传组件
**type?:'video'
**src?:string[]//图片数据，可用于初始数据
**count?:number//数量
**btnPath?:ImageURISource//占位图
**itemStyle?:item样式，width,height单独设
**itemWidth?:number
**itemHeight?:number//默认正方形
**onChange?:(e:string[])=>void
**/
exportdefaultclassUploaderextendsBase{
publicstate:State={
imageUploading:false,
images:[]
};
publicdidMount(){
this.initSrc(this.props.src)
}
publiccomponentWillReceiveProps(nextProps){
if(nextProps.hasOwnProperty('src')&&!!nextProps.src){
this.initSrc(nextProps.src)
}
}
/**
*初始化以及改动图片
**/
privateinitSrc=(srcProp:any)=>{
if(!this.isEqual(srcProp,this.state.images)){
this.setState({
images:srcProp
})
}
}

publicrender(){
const{style,btnPath,count,itemStyle,itemWidth,itemHeight,type}=this.props;
const{imageUploading,images}=this.state;
letcountNumber=count?count:1
return(


{images.length>0&&images.map((res,ind)=>(


{
this.singleEditInd=ind;
this.handleShowActionSheet()
}}
/>
删除


))}
{images.length
{imageUploading?(



上传中...


):(

{
this.singleEditInd=undefined;
this.handleShowActionSheet()
}}
/>

)}


}


{
if(type=='video'){
this.handleChooseVideo('camera')
}elseif(this.singleEditInd!==undefined){
this.handleChooseSingle('camera')
}else{
this.handleChooseImage('camera')
}
}
},{
name:'相册',
onClick:()=>{
if(type=='video'){
this.handleChooseVideo()
}elseif(this.singleEditInd!==undefined){
this.handleChooseSingle()
}else{
this.handleChooseImage()
}
}
}]}
>

);
}
privategetitemW(){
returnthis.props.itemWidth||92
}
privategetitemH(){
returnthis.props.itemHeight||this.itemW;
}

privateisEqual=(firstValue,secondValue)=>{
/**判断两个值（数组）是否相等**/
if(Array.isArray(firstValue)){
if(!Array.isArray(secondValue)){
returnfalse;
}
if(firstValue.length!=secondValue.length){
returnfalse;
}
returnfirstValue.every((item,index)=>{
returnitem===secondValue[index];
});
}
returnfirstValue===secondValue;
}
privatehandleShowActionSheet=()=>{
this.feedback.showFeedback('uploaderActionSheet');//这是显示ActionSheet选择弹窗。。。
}
privatehandleChooseImage=async(sourceType?:'camera')=>{
const{imageUploading,images}=this.state;
const{count}=this.props
if(imageUploading){
return;
}
letcountNumber=count?count:1
const{assets}=awaitthis.interface.chooseImage({//上面封装的选择图片方法
count:countNumber,
sourceType:sourceType||undefined,
});

if(!assets){
return;
}
this.setState({
imageUploading:true,
});

letrequest:any=[]
assets.map(res=>{
letreq=this.apiClient.uploadFile(res.uri)//上面封装的七牛上传方法
request.push(req)
})
Promise.all(request).then(res=>{
letimgs:any=[]
res.map((e:any)=>{
if(e&&e.url){
imgs.push(e.url)
}
})
imgs=[...images,...imgs];
this.setState({
images:imgs.splice(0,countNumber),
imageUploading:false,
},
this.handleChange
);
})

}
privatesingleEditInd?:number;//修改单个时的索引值
privatehandleChooseSingle=async(sourceType?:'camera')=>{
let{imageUploading,images}=this.state;
if(imageUploading){
return;
}

const{assets}=awaitthis.interface.chooseImage({//上面封装的选择图片方法
count:1,
sourceType:sourceType||undefined,
});
if(!assets){
return;
}
this.setState({
imageUploading:true,
});
constres=awaitthis.apiClient.uploadFile(assets[0].uri)//上面封装的七牛上传方法
if(res&&res.url&&this.singleEditInd){
images[this.singleEditInd]=res.url
}
this.setState({
images:[...images],
imageUploading:false,
},
this.handleChange
);

}
privatehandleChooseVideo=async(sourceType?:'camera')=>{
const{onChange}=this.props
let{imageUploading}=this.state;
if(imageUploading){
return;
}

const{assets}=awaitthis.interface.chooseVideo({
sourceType:sourceType
});
if(!assets){
return;
}
this.setState({
imageUploading:true,
});
constres=awaitthis.apiClient.uploadFile(assets[0].uri)//上面封装的七牛上传方法
if(res&&res.url){
//视频就不在组件中展示了，父组件处理
if(onChange){
onChange(res.url)
}
}
this.setState({
imageUploading:false,
});

}
privatehandleDelete=(ind:number)=>{
let{images}=this.state
images.splice(ind,1)
this.setState({
images:[...images]
},
this.handleChange
)
}
privatehandleChange=()=>{
const{onChange}=this.props
const{images}=this.state
if(onChange){
onChange(images)
}
}
}

importUploaderfrom"@/components/Uploader";
...
{
this.setState({
uploadImgs:urls
})
}}
src={uploadImgs}
/>
...