多读多写多记录，多学多练多思考。----------- Banana • Banuit Gang(BUG香柚帮)
最近在做小程序的多图片上传+连同表单信息和图片服务器端地址一起保存到数据库中这项功能，但是发现小程序只支持一张一张的图片上传，即使用递归或者循环都必须调用多次上传图片的方法，如果上传图片时连同表单一块提交持久化到数据库，那么就会保存多条记录，想了又想，最终思路就是把上传图片和提交表单分为两个方法，首先上传多张图片，在PHP后端单张上传成功后，返回给小程序一个服务器图片地址，然后小程序把地址保存到一个全局数组里边，当选择的图片和上传成功的图片相等时，再把数据转化为json，然后连同表单其他信息再调用上传信息的方法，持久化到数据库中就可以了。这只是我的思路，不知道还有什么好的方法可以解决这个问题呢。
我单独整理了一个小栗子，大家可以下载学习一下，例子中包括填写表单，上传信息，展示信息
GitHub地址：/kun19911227/
upload_info.js
//点击添加按钮选择多张图片
chooseImage: function(e) {
({
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
if ( <= 1) {
const images = ()
// 限制最多只能留下2张照片
({
images: images
})
} else {
({
title: '最多只能选择两张照片',
icon: 'none',
duration: 2000,
mask: true
})
}
}
})
}//上传图片和信息
upload_info: function() {
var images_list = []; //设置了一个空数组进行储存服务器端图片路径
for (var i = 0; i < ; i++) {
var that = this;
({
url: '/?g=api&m=user&a=upload_img', //上传图片接口地址
filePath: [i],
name: 'photo',
formData: null,
success: function(res) {
// json转换数组
var jsonObj = ()
images_list.push();//把每次返回的地址放入数组
if ( == images_list.length) {//当选中的图片和上传成功图片相等时，调用上传信息方法
var photo = (images_list)//将数组转化为json
({
url: '/?g=api&m=fastcar&a=upload_info',
method : 'POST',
data: {
name: ,
sex: == '男' ? 1 : 2,
age: ,
phone: ,
id_number: ,
is_member:1,
condition: ,
photo: photo,
expert_status: arr_str,
expert_units: ,
expert_name: .expert_name,
cons_start_date: ,
cons_end_date: .date2,
require_status:
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success(res) {
}
})
//(photo);
}
},
fail: function(error) {
(error);
}
})
}
}
/**
* 上传信息api
*/
public function upload_info() {
$data = array();
$post = array();
//接收参数
$post['name'] = I('');
$post['sex'] = I('');
$post['age'] = I('');
$post['phone'] = I('');
$post['id_number'] = I('post.id_number');
$post['is_member'] = I('post.is_member');
$post['condition'] = I('');
$post['phpto'] = I('');
$post['expert_status'] = I('post.expert_status');
$post['expert_units'] = I('post.expert_units');//非必填
$post['expert_name'] = I('post.expert_name');//非必填
$post['cons_start_date'] = I('post.cons_start_date');
$post['cons_end_date'] = I('post.cons_end_date');
$post['require_status'] = I('post.require_status');
$post['create_time'] = time();
if ( (empty($post['user_id']) && isset($post['user_id'])) ||
(empty($post['name']) && isset($post['name'])) ||
(empty($post['sex']) && isset($post['sex'])) ||
(empty($post['age']) && isset($post['age'])) ||
(empty($post['phone']) && isset($post['phone'])) ||
(empty($post['id_number']) && isset($post['id_number'])) ||
(empty($post['is_member']) && isset($post['is_member'])) ||
(empty($post['condition']) && isset($post['condition'])) ||
(empty($post['rop']) && isset($post['rop'])) ||
(empty($post['expert_status']) && isset($post['expert_status'])) ||
(empty($post['cons_start_date']) && isset($post['cons_start_date'])) ||
(empty($post['cons_end_date']) && isset($post['cons_end_date'])) ||
(empty($post['require_status']) && isset($post['require_status'])) ) {
$data['code'] = 0;
$data['msg'] = "有必填参数为空";
} else {
$result = D('User')->add($post);
if ($result !== false) {
$data['code'] = 1;
$data['msg'] = "提交成功";
} else {
$data['code'] = 2;
$data['msg'] = "提交失败";
}
}
return $this->ajaxReturn($data);
}
/**
* 上传图片
*/
public function upload_img() {
$data = array();
$uploadConfig = array(
'FILE_UPLOAD_TYPE' => sp_is_sae() ? 'Sae' : 'Local',
'rootPath' => './'.C( 'UPLOADPATH' ),
'savePath' => './minipro/',
'saveName' => array( 'uniqid', '' ),
'exts' => array( 'jpg', 'jpeg', 'png','gif' ),
'autoSub' => false
);
$upload = new \Think\Upload( $uploadConfig );
$info = $upload->upload();
if($info) {
$save_name = $info['photo']['savepath'].$info['photo']['savename'];
$save_name = substr($save_name,1);
$url = "http://".$_SERVER['HTTP_HOST']."/data/upload".$save_name;
$data['url'] = $url;
return $this->ajaxReturn($data);
}
}