前言
大家都知道微信小程序提交图片只能一张一张的提交,如果需要一次性提交多张图片,那么一般的方法都是进行循环提交。那么使用图片转base64,然后后台再将base64转成图片就可实现一次性提交多张图片了。我使用的uniapp与php配合上传图片,话不多说,直接上代码。
前端代码
let images = [];
var last = this.fileList.length - 1;//fileList 选择的图片数组
var _this = this;
this.fileList.forEach((value,index)=>{
//该方法是异步的,这里我主要测试base64是否能上传图片,所以同异步就没有严格操作了
wx.getFileSystemManager().readFile({
filePath: value.url,
encoding:"base64",
success: function (data){
images.push(data.data);//返回base64编码结果,但是图片的话没有data:image/png
if(index==last){//因为这个方法是异步的,所以判断是否为最后一个,这里没启效果。
//请自行处理异步,主要测base64是否能上传图片
_this.testCommitImages(images);//请求上传图片方法
}
},
});
});
testCommitImages(images){
this.api.Post('/testImages', {images:JSON.stringify(images)}, (res) => {
// 上传图片成功
if(res.data.code == 1) {
console.log(res.data.msg);
// 上传不成功,toast返回信息
}else {
this.$u.toast(res.data.msg, 2000);
}
})
}
后台代码
public function testImages(){
$images = I("images/s",'','strip_tags');//接受JSON字符串
$images=json_decode($images,true);
$path = "test/".date("Ymd",time());
if (!is_dir($path)){ //判断目录是否存在 不存在就创建
mkdir($path,0777,true);
}
$success_num = 0;
foreach($images as $image){
$imageName = "0312_".date("His",time())."_".rand(1111,9999).'.png';
$imageSrc= $path."/". $imageName;
$image_str = base64_decode($image);//将base64转换成图片 注意如果你图片转base46的时候
//加了前缀 data:image/jpeg;base64,等格式 需要将逗号后面的base64码提取出来才行
$r = file_put_contents($imageSrc, $image_str);//保存图片 返回的是字节数
if($r){
$success_num++;
}
}
$this->S(json_encode($success_num));
}
总结
以上就是今天要讲的内容,本人已经亲测有效。