pika_shangjia/warning/userAlarmUpload/userAlarmUpload.vue

<template>
	<view>
		<view class="input-box ddflex">
			<view class="input fflex">
				<input class="fflex" placeholder="请输入设备编号"/>
			</view>
			<image class="saoma" src="../../static/pages/images/saoma.png"></image>
		</view>
		
		<view>
			<view class="item ddflex">
				<view class="label">所属门店</view>
				<view class="item-input fflex">
					<input v-model="name" :disabled="true" class="fflex"/>
				</view>
			</view>
			<view class="item ddflex">
				<view class="label">机柜名称</view>
				<view class="item-input fflex">
					<input v-model="name" :disabled="true" class="fflex"/>
				</view>
			</view>
			<view class="item ddflex">
				<view class="label">巡检时间</view>
				<view class="item-input fflex">
					<biaofundatetimepicker class="biao fflex" :dateStr="time"
						placeholder="巡检时间" fields="minute" @change="changeEndDatetimePicker"></biaofundatetimepicker>
				</view>
			</view>
			<view class="item ddflex">
				<view class="label">检修记录表</view>
				<view class="item-input fflex" style="color: #2A82E4;" @click="choiceImages">
					点击上传
				</view>
			</view>
			
			<view class="ddflex" style="margin-bottom: 40rpx;padding: 30rpx;">
				<view class="product-image" v-for="item,index in imageList">
					<image style="width: 100%;height: 100%;margin-bottom: 0;" :src="item"></image>
					<image class="product-image-delete" src="../static/images/imagecuo.png" @click="removeProductImage(index)"></image>
				</view>
			</view>
			
		</view>
		
		<!-- 保存按钮 -->
		<view class="savepadding submit-box">
			<view class="submit-btn">
				保存
			</view>
		</view>
		
		<canvas canvas-id="canvas" :style="'width:' + cWidth + 'px;height:' + cHeight +'px;position: absolute;left:-1000px;top:-1000px;'"></canvas>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import biaofundatetimepicker from '../../components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		components: {
			biaofundatetimepicker
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				
				name:'白云科技门店',
				time:'',
				
				imageList:[],
				cWidth: 0,
				cHeight: 0,
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			changeEndDatetimePicker(val) {
				this.time = val.f1 + " " + val.hh+":"+val.mm+":"+"00"
			},
			// 图片移除
			// 移除产品图片
			removeProductImage(index){
				this.imageList.splice(index,1)
			},
			// 图片上传
			choiceImages(event) {
				let that = this;
				uni.chooseImage({
					count: 9,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					async success(res) {
						console.log(res);
						let list = res.tempFiles;
						console.log(list);
						let allList = [];
						for (let i = 0; i < list.length; i++) {
							//两M
							if (list[i].size > 50000) {
								var path = await that.compressImg(list[i].path)
								console.log(path)
								var data = {
									formData: {
										flag: 726
									},
									filePath: path,
									name: 'file'
								}
								allList.push(data);
							} else {
								var data = {
									formData: {
										flag: 722
									},
									filePath: list[i].path,
									name: 'file'
								}
								allList.push(data);
							}
						}
						console.log(allList)
						let successUp = 0;
						let failUp = 0;
						let count = 0
						// 多图上传 allList:图片数组 successUp：上传成功次数 现在上传的下标
						that.uploadImgs(allList, successUp, failUp, count);
					},
					fail(err) {}
				})
			},
			//通过canvans缩放长宽来压缩图片 path:图片本地路径  limitNum：压缩到长宽多大
			async compressImg(path, multiple = 2, limitNum = 600) {
				console.log('图片链接', path)
				let that = this;
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: path,
						success(res) {
							var canvasWidth = res.width //图片原始长宽
							var canvasHeight = res.height
							console.log('图片的基本信息', res)
							// while循环 保证宽高在100以内 Math.trunc()去掉小数点右边数
							while (canvasWidth > limitNum || canvasHeight > limitNum) {
								canvasWidth = Math.trunc(res.width / multiple)
								canvasHeight = Math.trunc(res.height / multiple)
								multiple++
							}
						 //设置画布长宽
							that.setData({
								cWidth: canvasWidth,
								cHeight: canvasHeight
							})
							//----------绘制图形并取出图片路径--------------
							var ctx = uni.createCanvasContext('canvas')
							ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
							ctx.draw(false, setTimeout(() => {
								uni.canvasToTempFilePath({
									canvasId: 'canvas',
									destWidth: canvasWidth,
									destHeight: canvasHeight,
									success: function(res) {
										console.log(res.tempFilePath) //图片路径
										resolve(res.tempFilePath)
									},
									fail: function(res) {
										console.log(res.errMsg)
									}
								})
							}, 100))
						},
						fail: function(res) {
							console.log(res.errMsg)
						},
					})
				})
			},
			//多张图片上传
			uploadImgs: function(allList, successUp, failUp, count) {
				console.log(allList, successUp, failUp, count)
				let that = this;
				let length = allList.length; //总共上传的数量
				var promise = Promise.all(allList.map(tempFilePath => {
					return new Promise(function(resolve, reject) {
						req.loadIng("上传中");
						req.uploadFile('/api/upload', tempFilePath.filePath, res => {
							that.imageList = that.imageList.concat(res.src);
							resolve()
						});
					});
				}));
				promise.then(function(results) {
					uni.showToast({
						title: '上传成功',
						icon: 'success',
						duration: 2000
					});
					// console.log(results);
				}).catch(function(err) {
					uni.hideToast()
					// console.log(err);
				});
			
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./userAlarmUpload.css";
</style>