The publishing function written by Vue (the simple version of wechat applet cooperates with cloud data development), pictures can be submitted, words can only be printed, but not submitted (self-improvement submission)

<template>
	<view class="publish_content">
		<view class="circlePublish">
			<form @submit="toPublish" @reset="">
				<button class="circle_pubutton" form-type="submit"> Release </button>
				<p class="publish_text">
					<span  v-show="isText" class="placeholder"> What do you want to say ......</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',
		});// Cloud service settings must have 
	export default{
    
		data(){
    
			return{
    
				textInfo:'',// Text Fonts 
				isText:true,// Prompt and display 
				tempFilePaths:[],// Picture storage 
				fileIDs:'',// Upload the picture id
					// {
    
					// url:"../../static/images/swiper2.png",
					// },
					// {
    
					// url:'../../static/images/merchantps.jpg',
					// }
				
				// Whether to display the required prompt text 
			}
		},
		methods:{
    
			// Select Picture 
			chooseImage:function(){
    
				var  that = this
				wx.chooseImage({
    
					count: 9,
					sizeType: ['original', 'compressed'],//  The size of the selected picture （ Original picture 、 Compressed graph ）
					sourceType: ['album', 'camera'],// The types of photos can be taken , It can be a mobile phone gallery 
					success (res) {
    
						// tempFilePath It can be used as img Labeled src Property display image 
						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)
					}
				})
			},
			// Browse the pictures 
			// 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
			// }
			// })
			
			// Use true false To control whether the prompt is displayed 
			consoleText:function(res){
    
				if(this.textInfo==''){
    
					this.isText = true
				}else{
    
					this.isText = false
				}
			},
			//  Click to publish the dynamic 
			toPublish:function(res){
    
				console.log(res)
				// this.push_image()
				// wx.showLoading({
    
				// title: ' In submission ',
				// })
				const promiseAll = []// Set array 
				// Upload one picture at a time 
				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',// File name 
						filePath: filePath, //  File path 
					}).then(res => {
    
						// get resource ID
						console.log(' I'm here 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 // Only when all the pictures have been uploaded , This value can be set , But uploading a file is an asynchronous operation , You don't know when they put fileid return , So you have to use it promise.all
				        }
				    })
				    .then( res => {
    
							console.log(res)
							wx.hideLoading()
							wx.showToast({
    
								title: ' Submit successfully ',
							})
				        })
				    .catch(error => {
    
							console.log(error)
				        })
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.publish_content{
    // Big box 
		width: 100vw;
		height:100vh;
		.circlePublish{
    
			padding: 50rpx 30rpx 30rpx 30rpx;
			.circle_pubutton{
    
				width: 90rpx;
				height: 50rpx;
				font: 400 12px/50rpx " In black ";
				text-align: center;
				padding: 0;
				background-color: #4CD964;
				float: right;
				margin-top:-50rpx;
				color:#fff;
			}
			.publish_text{
    // The text box 
				width: 100%;
				height: 200rpx;
				// padding-top: 15rpx;
				position: relative;
				.publish_textArea{
    
					font: 400 14px/50rpx " In black ";
					width: 100%;
					height: 200rpx;
				}	
				.placeholder{
    // typeface 
					position: absolute;
					font-family: " In black ";
					font-size: 14px;
					color: #767676;
				}
			}
			.tempImage{
    // The pattern of the picture 
				margin-left: 10rpx;
				.temp_imageList1{
    
					margin-right: 15rpx;
					width: 140rpx;
					height: 140rpx;
				}
			}
			.temp_imageList{
    
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>

Here's the picture ：