微信小程序使用图片转base64一次性提交多图片_base64图片批量上传

前言

大家都知道微信小程序提交图片只能一张一张的提交，如果需要一次性提交多张图片，那么一般的方法都是进行循环提交。那么使用图片转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);
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

后台代码

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));
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

总结

以上就是今天要讲的内容，本人已经亲测有效。