MingGaoApp_vue/MingGaoApp/pages/my/addcont.vue

<template>
	<view>
		<view class="context_box">
			<view class="weatherbox">
				<u--form labelPosition="left" :model="weatherdatas" :rules="rules" ref="form1">
					<u-form-item label="监测事项" prop="temp" ref="item1" labelWidth="80">
						<u--input v-model="weatherdatas.temp" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="imgbox">
				<view class="title">
					图像信息
				</view>
				<view class="imgbox_box">
					<view class="addimg" @click="gainimg">
						<u-icon size="20" name="plus" color="#409eff"></u-icon>
					</view>
					<view class="imgitem" v-for="item,index in urllist" :key="index">
						<image :src="item" mode="" class="img"></image>
					</view>

				</view>
			</view>
			<view class="describe_box">
				<view class="title">
					图像信息
				</view>
				<view class="textarea">
					<u--textarea v-model="value1" placeholder="请输入内容" :autoHeight="true"></u--textarea>
				</view>
			</view>
		</view>
	<kps-image-cutter @ok="onok" @cancel="oncancle" :url="kpsurlL" :fixed="false" :blob="false" :maxWidth="500"
		:maxHeight="500"></kps-image-cutter>
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		data() {
			return {
				weatherdatas: {
					temp: ""
				},
				rules: {
					'temp': {
						type: 'string',
						required: true,
						message: '请填写温度',
						trigger: ['blur', 'change']
					},
				},
				urllist: [],
				value1: "",
				kpsurlL:""
			}
		},
		components:{
			kpsImageCutter
		},
		methods: {
			gainimg() { //添加图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res)
						// this.urllist.push(res.tempFilePaths[0])
						this.kpsurlL = res.tempFilePaths[0]
					}
				});
			},
			oncancle(){
				
			},
			onok(ev){
				uni.uploadFile({
				    url: 'http://192.168.1.17:12345/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例，非真实的接口地址
					filePath: ev.path,
				    name: 'img_file',
				    success: (uploadFileRes) => {
						// console.log(ev.path)
						console.log(JSON.parse(uploadFileRes.data).data.src)
						// this.path = JSON.parse(uploadFileRes.data).data.src
						// this.uploadingTF=true
						// this.toloadTF = false
				    }
				});
			}
		},
		onLoad(){
			console.log(this.baseUrl)
		}
		
	}
</script>

<style lang="less" scoped>
	.context_box {
		width: 90%;
		margin: 0 auto;

		/deep/.u-form-item__body {
			border-bottom: 1px solid #F6F6F6;
			margin-bottom: 20rpx;
		}

		.imgbox {
			width: 100%;
			display: flex;
			margin-top: 30rpx;

			.title {
				font-size: 30rpx;
				width: 160rpx;
			}

			.imgbox_box {
				display: flex;
				flex-wrap: wrap;
				width: 80%;

				// justify-content: space-around;
				.addimg {
					width: 140rpx;
					height: 140rpx;
					border: 1px dashed #409eff;
					// text-align: center;
					display: flex;
					justify-content: space-around;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.imgitem {
					width: 140rpx;
					height: 140rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.describe_box {
			width: 100%;
			display: flex;
			margin-top: 30rpx;

			.title {
				font-size: 30rpx;
				width: 160rpx;
			}

			.textarea {
				width: 80%;
			}
		}
	}
</style>