微信上传多图示例

src/projects/business/views/Master/Health/Report.vue

@@ -74,22 +74,38 @@
 		methods: {
 			//微信选择图片
 			chooseImage() {
-				WxJsApi.chooseImage().then(res => {
-					var localData = res.localData;
-
-					if (localData.indexOf('data:image') != 0) {
-						//判断是否有这样的头部
-						localData = 'data:image/jpeg;base64,' + localData
-					}
-					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
-					this.imgBase64 = localData;
-					//显示裁剪图片
-					//_this.showCropper(field);
-					this.uploadpic();
+				WxJsApi.chooseImage(9).then(res => {
+
+					this.localIds = res;
+					this.syncUpload();
+
 				}).catch(error => {
 					mui.toast(error);
 				})
 			},
+			//多图上传递归函数
+			syncUpload() {
+				if (!this.localIds.length) {
+					mui.toast('上传完成');
+				} else {
+					var localId = this.localIds.pop();
+					var _this = this;
+
+					WxJsApi.getLocalImgData(localId, function(res) {
+						var localData = res.localData;
+
+						if (localData.indexOf('data:image') != 0) {
+							//判断是否有这样的头部
+							localData = 'data:image/jpeg;base64,' + localData
+						}
+						localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
+						_this.imgBase64 = localData;
+						//显示裁剪图片
+						//_this.showCropper(field);
+						_this.uploadpic();
+					})
+				}
+			},
 			//上传图片
 			uploadpic() {
 				this.isLoading = true;
@@ -97,6 +113,9 @@
 					this.isLoading = false;
 
 					this.picList.push(response);
+
+					//多图上传递归调用
+					this.syncUpload();
 				}).catch(error => {
 					this.isLoading = false;
 					mui.toast(error);

src/utils/wxJsApi.js

@@ -6,13 +6,13 @@ import Qs from 'qs';
 import request from '../utils/request'
 export function addSysLog(message) {
 
-    return request({
-        url: '/mobile/sysLogApi/submit',
-        data: Qs.stringify({
-            message:JSON.stringify(message)
-        }),
-        method: 'post',
-    })
+	return request({
+		url: '/mobile/sysLogApi/submit',
+		data: Qs.stringify({
+			message: JSON.stringify(message)
+		}),
+		method: 'post',
+	})
 }
 //获取微信配置
 export function getWxConfig(jsApiList) {
@@ -48,27 +48,42 @@ export function getWxConfig(jsApiList) {
 }
 
 //选择图片
-export function chooseImage() {
+export function chooseImage(count) {
+	var count = count || 1;
 	let promise = new Promise((resolve, reject) => {
 		wx.chooseImage({
-			count: 1,
+			count: count,
 			sizeType: ['compressed'],
 			sourceType: ['album', 'camera'],
 			success: function(res) {
 				var localIds = res.localIds;
 				console.log(localIds);
-				wx.getLocalImgData({
-					localId: localIds[0],
-					success: function(res) {
-						resolve(res);
-					}
-				});
+				if (count == 1) {
+					wx.getLocalImgData({
+						localId: localIds[0],
+						success: function(res) {
+							resolve(res);
+						}
+					});
+				} else {
+					resolve(localIds);
+				}
 			}
 		});
 	});
 	return promise;
 }
 
+//获取图片
+export function getLocalImgData(localId, fun) {
+	wx.getLocalImgData({
+		localId: localId,
+		success: function(res) {
+			fun(res);
+		}
+	});
+}
+
 //上传图片
 export function uploadPic(imgBase64) {
 	let promise = new Promise((resolve, reject) => {
@@ -98,25 +113,25 @@ export function getLocation() {
 				success: function(res) {
 					resolve(res);
 				},
-                faile: function(res) {
-                    reject(res);
-                },
+				faile: function(res) {
+					reject(res);
+				},
 				fail: function(res) {
-                    if(res.errMsg=='getLocation:timeout'){
-                        mui.alert("定位超时，请检查是否开启'定位'");
-                    }else if(res.errMsg=='getLocation:ERROR_NETWORK'){
-                        mui.alert("网络异常");
-                    }else if(res.errMsg=='getLocation:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF'){
-                        mui.alert("没开启系统定位");
-                    }else if(res.errMsg=='getLocation:system permission denied'){
-                        mui.alert("未给微信位置授权");
-                    }else if(res.errMsg=='getLocation:location permission'){
-                        mui.alert("未给微信位置授权");
-                    }else if(res.errMsg=='getLocation:auth denied'){
-                        mui.alert("用户在小程序中未授权");
-                    }else if(res.errMsg=='getLocation:fail authorize no response'){
-                        mui.alert("用户在小程序中未授权");
-                    }
+					if (res.errMsg == 'getLocation:timeout') {
+						mui.alert("定位超时，请检查是否开启'定位'");
+					} else if (res.errMsg == 'getLocation:ERROR_NETWORK') {
+						mui.alert("网络异常");
+					} else if (res.errMsg == 'getLocation:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
+						mui.alert("没开启系统定位");
+					} else if (res.errMsg == 'getLocation:system permission denied') {
+						mui.alert("未给微信位置授权");
+					} else if (res.errMsg == 'getLocation:location permission') {
+						mui.alert("未给微信位置授权");
+					} else if (res.errMsg == 'getLocation:auth denied') {
+						mui.alert("用户在小程序中未授权");
+					} else if (res.errMsg == 'getLocation:fail authorize no response') {
+						mui.alert("用户在小程序中未授权");
+					}
 					reject(res);
 				},
 				complete() {}
@@ -140,26 +155,26 @@ export function scanQRCode(needResult) {
 			faile: function(res) {
 				reject(res);
 			},
-            fail: function(res) {
+			fail: function(res) {
 
 
-                if(res.errMsg=='getLocation:timeout'){
-                    mui.alert("定位超时，请检查是否开启'定位'");
-                }else if(res.errMsg=='getLocation:ERROR_NETWORK'){
-                    mui.alert("网络异常");
-                }else if(res.errMsg=='getLocation:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF'){
-                    mui.alert("没开启系统定位");
-                }else if(res.errMsg=='getLocation:system permission denied'){
-                    mui.alert("未给微信位置授权");
-                }else if(res.errMsg=='getLocation:location permission'){
-                    mui.alert("未给微信位置授权");
-                }else if(res.errMsg=='getLocation:auth denied'){
-                    mui.alert("用户在小程序中未授权");
-                }else if(res.errMsg=='getLocation:fail authorize no response'){
-                    mui.alert("用户在小程序中未授权");
-                }
-                reject(res);
-            },
+				if (res.errMsg == 'getLocation:timeout') {
+					mui.alert("定位超时，请检查是否开启'定位'");
+				} else if (res.errMsg == 'getLocation:ERROR_NETWORK') {
+					mui.alert("网络异常");
+				} else if (res.errMsg == 'getLocation:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
+					mui.alert("没开启系统定位");
+				} else if (res.errMsg == 'getLocation:system permission denied') {
+					mui.alert("未给微信位置授权");
+				} else if (res.errMsg == 'getLocation:location permission') {
+					mui.alert("未给微信位置授权");
+				} else if (res.errMsg == 'getLocation:auth denied') {
+					mui.alert("用户在小程序中未授权");
+				} else if (res.errMsg == 'getLocation:fail authorize no response') {
+					mui.alert("用户在小程序中未授权");
+				}
+				reject(res);
+			},
 			complete() {}
 		})
 	});