current position:Home>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)

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)

2022-06-24 09:07:15Secret Shura

<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 : Insert picture description here

copyright notice
author[Secret Shura],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240625105438.html

Random recommended