uniapp 多级联动（省市区选择）, 选取图片及上传

简单的三级联动选择器，省市区的数据分别由单独的接口获取
在nvue页面，indicator-style的Height和view的height还要line-height要一直，不然不对其
效果图

封装成组件

/**
 * 多级联动地址选择器
 */
<template>
	<view class="bigMorePicker" @touchmove.stop.prevent="()=>false" @tap="closePicker">
		<view class="morePickerCent" @tap.stop="()=>false">
			<view class="morePickerTitle">
				<view @tap="closePicker" style="color: #333;">取消</view>
				<view @tap="confirmPicker" style="color:#1aa034">确认</view>
			</view>
			<picker-view indicator-style="height: 50px;" :value="defaultValue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in oneList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in twoList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in threeList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'morePicker',
		data(){	
			return {}
		},
		props:{
			//第一列数据
			oneList:{
				type:Array,
				default(){
					[]
				}
			},
			//第二列数据
			twoList:{
				type:Array,
				default(){
					[]
				}
			},
			//第三列数据
			threeList:{
				type:Array,
				default(){
					[]
				}
			},
			//默认
			defaultValue:{
				type:Array,
				default(){
					[]
				}
			},
		},
		methods:{
			//变化
			bindChange(e) {
				this.$emit('morePickerChange',e);
				console.log(e)
			},
			//取消
			closePicker(){
				this.$emit('closeMorePicker')
			},
			//确认
			confirmPicker(){
				this.$emit('confirmMorePicker')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigMorePicker{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}
	.morePickerCent{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		
	}
	.morePickerTitle{
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		border-bottom: #eee 2rpx solid;
	}
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>

调用页面

<!-- 省市区选择 -->
<more-picker 
	:oneList="provinces" 
	:twoList="citys" 
	:threeList="areas" 
	:defaultValue="defaultValue"
	@morePickerChange="morePickerChange" 
	@closeMorePicker="closeMorePicker" 
	@confirmMorePicker="confirmMorePicker" 
	v-if="isShowPicker">
</more-picker>

import morePicker from 'xxxxxxxxxx'

data(){	
	return {
		posiName:'暂无',//定位
		provinces:[],//省
		citys:[],//市
		areas:[],//区
		province:'',
		city:'',
		area:'',
		defaultValue: [0, 0, 0],//默认值
		isShowPicker: false,
	}
},
components:{
	morePicker
},
onLoad(){
	this.getProvinces()
},
methods:{
	//地址选择变化	
	morePickerChange(e){
		const val = e.detail.value;
		if(this.defaultValue[0] !== val[0]){
			this.defaultValue = [val[0],0,0];//省变，后面的都默认选第一个
			this.getProvinces();
		}else if(this.defaultValue[1] !== val[1]){
			this.defaultValue = [val[0],val[1],0];//市变，后面的默认第一个
			this.getCitys();
		}else{
			this.defaultValue = val;
		}
	},
	//取消选取
	closeMorePicker(){
		this.isShowPicker = false;
	},
	//确认选取
	confirmMorePicker(){
		this.isShowPicker = false;
		//省
		if(this.provinces[this.defaultValue[0]].id){
			this.province = this.provinces[this.defaultValue[0]].name;
		}
		//市
		if(this.citys[this.defaultValue[1]].id){
			this.city = this.citys[this.defaultValue[1]].name;
		}else{
			//没有市，就只有省
			this.posiName = this.province;
			return
		}

		//区/县
		if(this.areas[this.defaultValue[2]].id){
			this.area = this.areas[this.defaultValue[2]].name;
			this.posiName = this.area;
		}else{
			//没有区/县，就只到市
			this.posiName = this.city;
		}
	},
	//获取省
	async getProvinces(){
		let data = await this.$api.getProvinces();//我自己的省数据请求接口
		if(data.code == 1){
			this.provinces = data.data;
			this.getCitys();
		}else{
			uni.showToast({
				title:'省获取失败',
				icon:'none'
			})
		}
	},
	//获取市
	async getCitys(){
		let id = this.provinces[this.defaultValue[0]].id;
		let data = await this.$api.getCitys({province_id:id});//我自己的市数据请求接口
		if(data.code == 1){
			data.data.unshift({id:'',name:'全部'});
			this.citys = data.data;
			this.getAreas();
		}else{
			uni.showToast({
				title:'市获取失败',
				icon:'none'
			})
		}
	},
	//获取区
	async getAreas(){
		let id = this.citys[this.defaultValue[1]].id;
		if(id){
			let data = await this.$api.getAreas({city_id:id});//我自己的区/县数据请求接口
			if(data.code == 1){
				data.data.unshift({id:'',name:'全部'});
				this.areas = data.data;
			}else{
				uni.showToast({
					title:'区/县获取失败',
					icon:'none'
				})
			}
		}else{
			this.areas = []
		}
	},
}

图片选取及上传

/**
 * 图片选取上传
 * 单张多张都可以
 * */
export const chooseImg = (count=1,formData={'user':'test'}) => {
	const url = 'xxxxxxxxxxxxx';//图片上传路径
	return new Promise((rel,rej) =>{
		uni.chooseImage({
			count, // 选取数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success(r) {
				let arr = [];
				r.tempFilePaths.map((item,index) =>{
					//单张图片
					uni.uploadFile({
						url, 
						filePath: item,
						name: 'file',
						formData,
						success(res){
						  if(res.statusCode==200){
							res.data = JSON.parse(res.data);
							  if(res.data.code==1){
								 arr.push(res.data.data.fullurl);
								 if((index+1) >= r.tempFilePaths.length){
								 	 rel(arr);
								 }
							  }
						  }
						}
					}) 
				})
				
			}
		})
	})
}