vue写的发布功能（微信小程序简单版 配合云数据开发），图片可以提交，文字只打印，没有提交（自己完善提交）

<template>
	<view class="publish_content">
		<view class="circlePublish">
			<form @submit="toPublish" @reset="">
				<button class="circle_pubutton" form-type="submit">发布</button>
				<p class="publish_text">
					<span  v-show="isText" class="placeholder">想说点什么......</span>
					<textarea class="publish_textArea" @input="consoleText()"  v-model="textInfo"  type="text" name="textarea" />
				</p>
				<view class="tempImage">
					<image class="temp_imageList1" :src=item :key="index"  v-for="(item,index) in  tempFilePaths"></image>
				</view> 
			</form>
			<image class="temp_imageList" @click="chooseImage()" src="../../static/images/addphotos.png">
			<image class="temp_imageList" src="../../static/images/subsPs.png">
		</view> 
	</view>
</template>

<script>
	const db = wx.cloud.database({
			env:'juzibangbang-h7ali',
		});//云服务的设置必须要有
	export default{
		data(){
			return{
				textInfo:'',//文本字体
				isText:true,//提示与是否显示
				tempFilePaths:[],//图片存放
				fileIDs:'',//上传图片的id
					// {
					// 	url:"../../static/images/swiper2.png",
					// },
					// {
					// 	url:'../../static/images/merchantps.jpg',
					// }
				
				//是否显示所需的提示文字
			}
		},
		methods:{
			//选择图片
			chooseImage:function(){
				var  that = this
				wx.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],//	所选的图片的尺寸（原图、压缩图）
					sourceType: ['album', 'camera'],//相片的类型可以拍，可以是手机图库
					success (res) {
						// tempFilePath可以作为img标签的src属性显示图片
						if(that.tempFilePaths.length==0){
							that.tempFilePaths = res.tempFilePaths
						}else if(that.tempFilePaths.length<9&&that.tempFilePaths.length>0){
							that.tempFilePaths.push(res.tempFilePaths) 
						}
						console.log(res)
					}
				})
			},
			//浏览图片
			// wx.cloud.getTempFileURL({
			// 	fileList: ['cloud://juzibangbang-h7ali.6a75-juzibangbang-h7ali-1300915364/images/actbarchoose.png'],
			// 	success: res => {
			// 		// get temp file URL
			// 		console.log(res.fileList)
			// 		that.tempFilePaths = res.fileList[0].
			// 		},
			// 	fail: err => {
			// 		// handle error
			// 		}
			// })
			
			//使用true false来控制是否显示提示语
			consoleText:function(res){
				if(this.textInfo==''){
					this.isText = true
				}else{
					this.isText = false
				}
			},
			// 点击发布动态
			toPublish:function(res){
				console.log(res)
				// this.push_image()
				// wx.showLoading({
				//       title: '提交中',
				//     })
				const promiseAll = []//设置数组
				//每次上传一张图片
				for (var i=0; i < this.tempFilePaths.length; i++) {
					let filePath = this.tempFilePaths[i]
				promiseAll.push(new Promise((reslove,reject)=>{
					wx.cloud.uploadFile({
						cloudPath: new Date().getTime() +'.png',//文件名字
						filePath: filePath, // 文件路径
					}).then(res => {
						// get resource ID
						console.log('我是这里的id：')
						console.log(res.fileID)
						this. fileIDs = res.fileID
						reslove()
					}).catch(error => {
						// handle error
						console.log(error)
					})
				 }))
				}
				Promise.all(promiseAll).then(res=>{
				    db.collection('personcritics').add({
				        data: {
							fileIDs: this.fileIDs //只有当所有的图片都上传完毕后，这个值才能被设置，但是上传文件是一个异步的操作，你不知道他们什么时候把fileid返回，所以就得用promise.all
				        }
				    })
				    .then( res => {
							console.log(res)
							wx.hideLoading()
							wx.showToast({
								title: '提交成功',
							})
				        })
				    .catch(error => {
							console.log(error)
				        })
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.publish_content{//大盒子
		width: 100vw;
		height:100vh;
		.circlePublish{
			padding: 50rpx 30rpx 30rpx 30rpx;
			.circle_pubutton{
				width: 90rpx;
				height: 50rpx;
				font: 400 12px/50rpx "黑体";
				text-align: center;
				padding: 0;
				background-color: #4CD964;
				float: right;
				margin-top:-50rpx;
				color:#fff;
			}
			.publish_text{//文本框
				width: 100%;
				height: 200rpx;
				// padding-top: 15rpx;
				position: relative;
				.publish_textArea{
					font: 400 14px/50rpx "黑体";
					width: 100%;
					height: 200rpx;
				}	
				.placeholder{//字体
					position: absolute;
					font-family: "黑体";
					font-size: 14px;
					color: #767676;
				}
			}
			.tempImage{//图片的样式
				margin-left: 10rpx;
				.temp_imageList1{
					margin-right: 15rpx;
					width: 140rpx;
					height: 140rpx;
				}
			}
			.temp_imageList{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>

如下图：