页面

<template>
	<view class="">
		<view class="ptb-30">
			<view class="plr">
				<textarea v-model="message" maxlength="1000" placeholder="输入内容（最多1000字）" class="w100" style="height: 450rpx;" />
				</view>
			<view class="item-box flex flex-wrap u-m-l-36 u-m-r-8">
				<view class="item upload u-m-t-20 relative" v-for="(item,i) in imgarr" :key="i" v-show="imgarr.length!=0">
					<image :src="item.img1" v-if=""></image>
					<image @click="del(i)" src="../../static/dy-del.png" class="absolute" style="width: 32rpx;height: 32rpx;top: 5rpx;right: 5rpx;" v-if=""></image>
				</view>
				<view class="item upload u-m-t-20" @click="getimg" v-show="imgarr.length < 9">
					<image src="../../static/upload-img.png" v-if=""></image>
				</view>
			</view>
			<u-cell-item title="选择地址" :border-bottom="false" :value="address" @click="getAddress"></u-cell-item>
		</view>
	</view>
</template>

<script>
	import {upload} from '../../common/common.js'
	export default{
		data(){
			return{
				message:'',
				imgarr:[],
				address:'请选择',
				longitude:'',
				latitude:'',
			}
		},
		onNavigationBarButtonTap(){
			if(!this.message.trim()){
				uni.showToast({
					title:'请输入文字内容',
					icon:'none'
				})
			}else if(this.imgarr.length==0){
				uni.showToast({
					title:'请上传图片',
					icon:'none'
				})
			}else{
				let img=[]
				this.imgarr.forEach(item=>{
					img.push(item.img2)
				})
				this.$http('/api/dynamic/addDynamic',{
					content:this.message,
					img:img.join(','),
					lng:this.longitude,
					lat:this.latitude
				},"POST").then(data=>{
					uni.navigateBack()
					setTimeout(()=>{
						uni.showToast({
							title:'发布成功',
						})
					},100)
				})
			}
		},
		methods:{
			getimg(){
				upload(9-this.imgarr.length).then((arr)=>{
					console.log(arr)
					this.imgarr.push(...arr)
				})
			},
			del(i){
				this.imgarr.splice(i,1)
			},
			getAddress(){
				var _this = this;
				uni.chooseLocation({
				    success: function (res) {
							_this.address = res.address
							_this.longitude = res.longitude
							_this.latitude = res.latitude
				    }
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field{
		padding: 0 !important;
	}
	.upload {
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}
	.item {
		border-radius: 60rpx;
		margin-right: 28rpx;
		width: calc((100% - 28rpx * 3) / 3);
		image {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}
	
	// 给最外层的盒子添加伪元素，列不满则左对齐
	.item-box::after {
		content: "";
		flex: auto;
	}
</style>

common.js

import tim from './tim/tim.js'
import {
	store
} from '../store/index'

import {baseUrl} from './http.js'

export let loginTim = (id = store.state.userInfo.user_id + '', sig = store.state.userInfo.userSig) => {
	return new Promise((resolve, reject) => {
		let promise = tim.tim.login({
			userID: id + '',
			userSig: sig
		});
		promise.then((res) => {
			resolve(res)
			console.log('tim登陆结果111', res);
			//登录成功后 更新登录状态
			this.$store.commit("toggleIsLogin", true);
			//tim 返回的用户信息
			this.$store.commit("getTimUserInfo", res.data);
		}).catch((err) => {
			console.warn('TIM login error:', err); // 登录失败的相关信息
		});
	})

}

/**
 *  count-- 可选张数
 * 	arr-- 最终结果   [{img1:'全路径',img2:'半路径'},{img1:'全路径',img2:'半路径'}]
 */
export let upload = (count=1) => {
	console.log(count);
	return new Promise((resolve, reject) => {
		uni.chooseImage({
				count:count,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function (res) {
					uni.showLoading({
						title: '上传中'
					})
					let imgarr = res.tempFilePaths
					let arr=[]
					imgarr.forEach(item=>{
						uni.uploadFile({
							url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: item,
							name: 'file',
							success: (res) => {
								uni.hideLoading()
								let obj={
									img1:JSON.parse(res.data).data.fullurl,
									img2:JSON.parse(res.data).data.url
								}
								arr.push(obj)
								if(arr.length == imgarr.length){
									resolve(arr)
								}
							},
							fail:()=>{
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
					})
					
				}
			});
		
	})
}