收藏
回答

开发微信公众号h5页面,wx.chooseImage在安卓手机两个上传图片会相互影响,苹果的没问题?

开发微信公众号h5页面,在solve、submit两个组件使用到了上传图片wx.chooseImage,在线上时:安卓手机先打开solve文件中的这个没有反应,先打开submit文件中的这个上传图片再打开solve中的,solve中的就可以打开了。苹果手机没有这个问题,为什么呢?

代码:

微信配置函数:
export function wxConfig(jsApiList, ) {
	let app = getApp();
	// url
	let url = window.location.href;
	if (uni.getSystemInfoSync().platform === 'ios') {
		url = app.globalData.firstPage;
	}
	Request.get(RequestConstant.wxSignatureUrl, {
		url: encodeURIComponent(url)
	}).then(res => {
		if (res.code == 200) {
			let data = res.result;
			jweixin.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: data.appId, // 必填,公众号的唯一标识
				timestamp: data.timestamp, // 必填,生成签名的时间戳
				nonceStr: data.noncestr, // 必填,生成签名的随机串
				signature: data.signature, // 必填,签名
				jsApiList: jsApiList // 必填,需要使用的JS接口列表
			})
		}
	});
}


solve文件内容:
<template>
	<view>
		<view class="cu-bar bg-white margin-top">
			<view class="action cuIcon-title text-orange">
				<text class="text-black">上传图片</text>
			</view>
			<view class="action">
				{{imgList.length}}/9
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="deleteImage(index)">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="flex flex-direction logout-panel">
			<button class="cu-btn bg-blue margin-tb-sm lg" @click="submit()">确认提交</button>
		</view>
	</view>
</template>


<script>
	const jweixin = require('jweixin-module')
	import {
		RequestConstant
	} from '@/util/constant.js'
	import {
		formatDate,
		wxConfig,
		uploadBase64DataToQiniu
	} from '@/util/util.js'
	import {
		pathToBase64
	} from '@/js_sdk/gsq-image-tools/image-tools/index.js';
	import moment from 'moment'
	export default {
		data() {
			return {
				order: null,
				orderId: null,
				orderInfo: null,
				operationId: 0,
				operation: ['确认关闭', '确认退回', '确认关闭', '确认关闭'],
				imgList: [],
				remark: '',
				status: 6,
				ot: 6,
			}
		},
		methods: {
			chooseImage() {
				uni.hideKeyboard();
				let that = this
				jweixin.chooseImage({
					count: 9 - that.imgList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
					success: function(res) {
						let localIds = res.localIds;
						if (localIds.length > 0) {
							uni.showLoading({
								title: '图片上传中',
								mask: true
							})
							that.uploadOneByOne(localIds, 0)
						}
					}
				})
				uni.hideKeyboard();
			},
			uploadOneByOne(localIds, index) {
				let that = this;
				// 获取本地图片的base64数据
				jweixin.getLocalImgData({
					localId: localIds[index],
					success: function(res) {
						let localData = res.localData;
						// 上传至七牛云, 上传成功后返回文件url
						uploadBase64DataToQiniu(localData).then(filePath => {
							that.imgList.push(filePath);
							// 执行下一张图片的上传
							if (index < localIds.length - 1) {
								that.uploadOneByOne(localIds, index + 1)
							} else {
								uni.hideLoading()
							}
						})
					}
				});
			},
			deleteImage(index) {
				// 移除元素
				this.imgList.splice(index, 1);
			},
			submit() {
				uni.hideKeyboard();
				let that = this;

				let imgStr = '';
				that.imgList.forEach(img => {
					imgStr = imgStr + img + ',';
				});
				imgStr = imgStr.substr(0, imgStr.length - 1);

				let data = Object.assign({}, that.order);

				let user = uni.getStorageSync('user');
	
				data['contact'] = user.phone;
				data['id'] = that.orderId;
				data['repairTime'] = moment().format("YYYY-MM-DD HH:mm:ss");


				let stringImg = ''
				if (data['afterImguri']) {
					if (imgStr) {
						stringImg = imgStr + ',' + data['afterImguri']
					} else {
						stringImg = data['afterImguri']
					}
				}


				data['afterImguri'] = stringImg
				data['afterImg'] = imgStr
				data['status'] = 0;
				// data['afterDesc'] = that.remark;


				// 测试先关掉
				if (!imgStr) { //测试图片再放开
					uni.showModal({
						title: '提示',
						content: "请至少上传一张图片"
					})
					return;
				}


				// if (that.ot == 1) {
				// 	data['status'] = 6;
				// } else {
				// 	data['status'] = 4;
				// }
				data['operationId'] = user.id;
				data['updateBy'] = user.id;
				data['operationName'] = user
					.realname;
				data['updateByName'] = user.realname;
				data['limitTime'] = moment(that.order.limitTime)
					.valueOf(); //转时间戳
				data['isRedo'] = 0; //转时间戳
				// if (user.roles.findIndex(role => role.id == 2) > -1) {
				// 	data['isClose'] = 1;
				// } else {
				// 	data['isClose'] = 0;
				// }
				// data['isClose'] = 0;


				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				// let url = RequestConstant.handle;//之前的提交关闭原因和图片
				let url = RequestConstant.orderEdit;
				console.log('data', data);
				that.$put(url, data).then(res => {
					// that.$post(url, data).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
					if (err.statusCode == 200) {
						uni.hideLoading();
						// that.loading = false;
						uni.navigateTo({
							url: '/pages/order/success'
						})
					} else {
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				})
			},
			listHistory() {
				let that = this;
				that.$get(RequestConstant.listOrderHistoryUrl + '?pageSize=50&repairId=' + this.orderId).then(
					res => {
						if (res.code == 200) {
							let history = res.result.records.sort((a, b) => {
								if (new Date(a.createTime) > new Date(b.createTime)) {
									return -1
								} else {
									return 11;
								}
							});
							if (history.length > 0) {
								that.imgList = history[0].imageUrls;
								that.remark = history[0].remark;
							}
						}
					})
			},
			getRepairInfo(orderId) {
				let that = this;
				that.$get(RequestConstant.getRepairTempUrl + '?repairId=' + orderId).then(res => {
					if (res.code == 200 && res.result) {
						that.remark = res.result.remark;
						that.imgList = res.result.imageUrl ? res.result.imageUrl.split(',') : [];
						console.log(res.result);
					}
				});
			}
		},
		onLoad(option) {
			this.operationId = option.ot; //ot 2保洁点关闭 3管理员点关闭 0维修点关闭 1维修点退回
			this.ot = option.ot; //ot 2保洁点关闭 3管理员点关闭 0维修点关闭 1维修点退回
			this.orderId = option.id;
			console.log('orderid', option.id);
			this.status = option.status;
			console.log('option', option);
			this.order = JSON.parse(option.order);
			if (this.operationId == 0) {
				this.getRepairInfo(this.orderId);
			}
			if (this.operationId == 1) {
				this.listHistory();
			}
			this.$loadToken(() => {
				// 微信sdk配置
				wxConfig(['chooseImage', 'getLocalImgData'])
			})
		},
	}
</script>


ssubmit文件(由于文件太长,下面去除了一些与文件上传不相关的内容):
<template>
	<view>
		<!-- 图片 -->
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="text-black">上传图片</text>
			</view>
			<view class="action">
				{{imgList.length}}/9
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index">
					<image :src="imgList[index]" mode="aspectFill" @tap.stop="preview(imgList, index)"></image>
					<view class="cu-tag bg-red" @tap.stop="deleteImage(index)">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>

		<view class="flex flex-direction logout-panel">
			<button class="cu-btn bg-blue margin-tb-sm lg" @click="submit()" :loading="loading"
				:disabled="loading">submit</button>
		</view>
	</view>
</template>


<script>
	const jweixin = require('jweixin-module')
	import {
		formatDate,
		wxConfig,
		uploadBase64DataToQiniu
	} from '@/util/util.js'
	import {
		RequestConstant
	} from '@/util/constant.js'
	import {
		pathToBase64
	} from '@/js_sdk/gsq-image-tools/image-tools/index.js';
	import moment from "moment";


	export default {
		data() {
			return {
				...
			}
		},
		methods: {
			preview(urls, currentIndex) {
				uni.previewImage({
					urls: urls,
					current: currentIndex,
					loop: true
				})
			},
			
			chooseImage() {
				uni.hideKeyboard();
				let that = this
				jweixin.chooseImage({
					count: 9 - that.imgList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
					success: function(res) {
						let localIds = res.localIds;
						if (localIds.length > 0) {
							uni.showLoading({
								title: '上传图片中',
								mask: true
							})
							that.uploadOneByOne(localIds, 0)
						}
					}
				})
				uni.hideKeyboard();
			},
			uploadOneByOne(localIds, index) {
				// uploadOneByOne(filePaths, index){
				let that = this;
				// 获取本地图片的base64数据
				jweixin.getLocalImgData({
					localId: localIds[index],
					success: function(res) {
						let localData = res.localData;
						// 上传至七牛云, 上传成功后返回文件url
						uploadBase64DataToQiniu(localData).then(filePath => {
							that.imgList.push(filePath);
							// 执行下一张图片的上传
							if (index < localIds.length - 1) {
								that.uploadOneByOne(localIds, index + 1)
							} else {
								uni.hideLoading()
							}
						})
					}
				});
			},
			
			deleteImage(index) {
				// 移除元素
				this.imgList.splice(index, 1);
			},
			submit() {
				uni.hideKeyboard(); //隐藏键盘
				let that = this;
		
				let imgStr = '';
				that.imgList.forEach(img => {
					imgStr = imgStr + img + ',';
				});
				imgStr = imgStr.substr(0, imgStr.length - 1);
				// if (!imgStr) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: "请至少上传一张图片"
				// 	})
				// 	return;
				// }
				let data = {};
				data['imageUrl'] = imgStr
				that.loading = true;
				that.$post(RequestConstant.addOrder, data).then(res => {
					uni.hideLoading();
					that.loading = false;			
					uni.navigateTo({
						url: '/pages/order/success'
					})
				})
			},
		
		},
		onLoad(option) {
			let user = uni.getStorageSync('user');
			let orgCode = user.orgCode;
			// ot 0故障报修 1创建任务
			this.ot = option.ot;
			this.locationId = option.locationId;
			this.locationName = option.locationName;
			this.$loadToken(() => {
				wxConfig(['chooseImage', 'getLocalImgData'])
			})
		}
	}
</script>

回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容