react native 图片上传，以及服务端( php )示例程序
react native 编写界面界面样式设计图:示例代码布局很简单，只列举 关键部位的代码 _renderAddImageView(index){ if (this.state.avatarSource!=null&&index<this.state.avatarSource.length) { return( <Image source={require('../../img/service/虚线框.png')} style ={addImageViewStyles.image}> <Image source={this.state.avatarSource[index]} style={addImageViewStyles.imageL} /> <TouchableOpacity onPress ={this.deleteLoadedImage.bind(this,index)} style={addImageViewStyles.rightDelButton}> <Image source={require('../../img/service/删除.png')}/> </TouchableOpacity> </Image> ); } if ((this.state.avatarSource==null||this.state.avatarSource.length<1)&&index==1){ return null; } return ( <Image source={require('../../img/service/虚线框.png')} style ={styles.image}> <TouchableOpacity onPress = {this.addOnClicked.bind(this)}> <Image source={require('../../img/service/添加.png')}></Image> </TouchableOpacity> <Text style ={styles.normalTitle}>上传图片</Text> <Text style ={styles.normalText}>(最多能上传2张)</Text> </Image> ); }
react native 加载图片几点说明
示例代码ImagePicker.launchImageLibrary(options,(response) => { if (response.didCancel) { console.log('用户点击了取消'); } else if (response.error) { console.log('ImagePicker 出错: ',response.error); } else { let source = {uri: 'data:image/jpeg;base64,' + response.data,isStatic: true}; if (Platform.OS === 'ios') { source = {uri: response.uri.replace('file://',''),isStatic: true}; } else { source = {uri: response.uri,isStatic: true}; } let imageArray = this.state.avatarSource; imageArray.push(source); let imgFileNameArray = this.state.imgFileName; if (response.fileName!=null) { imgFileNameArray.push(response.fileName); } this.setState({ avatarSource:imageArray,imgFileName:imgFileNameArray }); } });
react native 上传图片接口部分封装上传文件的接口 function fetchUploadAction(...props) {
this.url = props.shift(1);
this.options = props.shift(1);
return fetch(this.url,Object.assign({},this.options))
.then((response) => {
const bodyBlob = response["_bodyBlob"];
if (bodyBlob != null && bodyBlob.size == 0) {
return null;
}
const headers = response["headers"]
if (headers != null) {
const mapHeader = headers["map"];
if (mapHeader != null) {
contentLength = mapHeader["content-length"];
if (contentLength != null && contentLength == 0) {
return null;
}
}
}
return response.json()
});
调用上面的接口，专门用来上传图片 //imagesObject是存储调用相册返回的选中的图片的多个对象,可获得图片uri
//fileName 这几个对象对应的文件名，也可不要这个参数 从上面的uri中截取
function postUpLoadImage_Attachment(imagesObject,fileName) {
var apiPort = "v1/cases/attachments/";
let retObject = null;
for(let i=0;imagesObject!=null&&i<imagesObject.length;i++){
let formData = new FormData();
let tmpUri =imagesObject[i];
//DateFormatTool.GetDateTimeStrValue() 是获取当前时间的时间戳字符串
let tmpfileName=DateFormatTool.GetDateTimeStrValue()+"_"+i+"_"+fileName[i];
let file = {uri:tmpUri.uri,type:'multipart/form-data',name:tmpfileName};
formData.append("attachment",file);
retObject=fetchUploadAction(`${kParCRMAPIBaseURL}/${apiPort}`,{
method: 'post',headers: {
'Content-Type':'multipart/form-data',},body: formData,});
}
return retObject;
},
调用示例try {
CRMServiceApiNet.postUpLoadImage_Attachment(this.state.avatarSource,this.state.imgFileName)
.then((response) => { this.updateLoadingState(false); if(response!=null&&response.code) { HandleErrorManager.handleObj(response); } else { console.log("上传成功"+response); this.sendTheQuestionSuccess(); } }) } catch(e) { this.updateLoadingState(false); StandardAlertCom.show('提示','网络错误',[ { text: '确定',onPress: () => console.log('确定 Pressed!') } ]); }
服务器端设计服务器配置
安装Apache这一步跳过 ，因为mac 上自带 Apache 环境 。 配置根目录使用命令行工具 cd 到 /etc目录 如图 配置上传目录的属性运行命令 ls *php* ，找到php.init 文件，如果没有 则找到 php.ini.default copy 一份， 配置上传文件时的参数
一般地，设置好上述四个参数后，上传<=100M的文件是不成问题，在网络正常的情况下。
如果上面配置后还不成功，你可以把php.ini.default 再配置一下。 几个简单的API介绍1.pathinfo函数原型: pathinfo(path,options)
返回的数组元素如下：
2.file_exists定义和用法
语法
参数 描述
3.getimagesize
返回的数据解析（成功返回一个数组，失败则返回 FALSE ）
4.move_uploaded_file函数原型 ： move_uploaded_file(file,newloc) 参数描述
说明
#php 示例代码本代码设计一个文件上传管理类 ，定义一系列的操作。$this->retErrorDetail 为返回的错误信息，如果没有出错该值则为 null 。如果上传成功则返回一个json 数据，（哪些文件上传成功，文件的参数，哪些失败，失败的原因）。 function handleUploadAndSave($formkey){
$FilekeyValue_FormData =$formkey;
$theFile = $_FILES[$FilekeyValue_FormData]["tmp_name"];
//Post multipart
if ($_FILES[$FilekeyValue_FormData]["error"] > 0){
$this->retErrorDetail="Error: " . $_FILES[$FilekeyValue_FormData]["error"];
$this->formatDetailError($this->retErrorDetail);
return false;
}else{
//打印上传二进制文件信息
foreach($_FILES[$FilekeyValue_FormData] as $key=>$value){
$this->formatDetailSuccess($key."=>".$value. "n");
}
//定义上传的文件 保存的路径
$target_dir = "/Users/XXXX/myWebServer/uploads/".$this->caseId."/";
$target_file = $target_dir.basename($_FILES[$FilekeyValue_FormData]["name"]);
$uploadOK = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// 检查 上传的文件是否为图片
$check = getimagesize($theFile);
if($check !== false) {
$this->formatDetailSuccess("文件是一个 图片- " . $check["mime"] . ".");
$uploadOk = 1;
} else {
$this->retErrorDetail="文件不是图片.";
$this->formatDetailError($this->retErrorDetail);
$uploadOk = 0;
}
// 检测要上传的文件是否 已经被上传（在该目录下是否已存在该文件）
if (file_exists($target_file)) {
$this->retErrorDetail="抱歉,该文件已存在.";
$this->formatDetailError($this->retErrorDetail);
$uploadOk = 0;
}
//检测要上传文件的大小 >1mb
if ($_FILES[$FilekeyValue_FormData]["size"] > 1024*1024) {
$this->retErrorDetail="抱歉,您上传的文件太大了";
$this->formatDetailError($this->retErrorDetail);
$uploadOk = 0;
}
//检测后缀名称
$imageFileType = strtolower($imageFileType);
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
$this->retErrorDetail= "抱歉,仅支持 JPG,JPEG,PNG & GIF files";
$this->formatDetailError($this->retErrorDetail);
$uploadOk = 0;
}
//检测是否上传成功
if ($uploadOk == 0) {
$this->retErrorDetail="抱歉,您的文件没有被上传成功.";
$this->formatDetailError($this->retErrorDetail);
} else {
if (!mkdir("uploads")){
$this->formatDetailSuccess("创建目录失败");
return false;
}
if (move_uploaded_file($theFile,$target_file))
{
$this->formatDetailSuccess("文件已经被上传成功.");
} else {
$this->retErrorDetail="抱歉,保存文件时出现未知错误.";
$this->formatDetailError($this->retErrorDetail);
}
}
}
if($uploadOk==0){
return false;
}
return true;
}
运行效果客户端上传图片服务端接收在 uploads 目录下 ，找到创建的case 。(联系方式和具体的描述写在 文档里) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |