xunjian_app/scan_pages/scanning/scanItem/scanimg.vue

<template>
	<view>
		<view class="img_box u-m-t-24">
			<view v-for="(imgItem, im) in photoPoints" :key="imgItem.id">
				<view class="titl u-flex u-row-left u-m-t-12 u-m-l-8">
					<span>{{ im + 1 }}.{{ imgItem.name }}</span>
					<sup class="sup" v-if="imgItem.isRequired">*</sup>
				</view>
				<u-upload
					:source-type="['camera']"
					@on-list-change="change(imgItem.id, im)"
					upload-text="拍照"
					width="139"
					height="139"
					:max-size="10 * 1024 * 1024"
					max-count="6"
					ref="uUpload"
					:action="action"
					:auto-upload="false"
				></u-upload>
			</view>
		</view>

		<u-toast ref="sacast" />
	</view>
</template>

<script>
export default {
	props: {
		//照片点数组
		photoPoints: {
			type: [Object, Array]
		},
		//拍照选项项目巡检id
		scan_id: {
			type: Number
		}
	},
	data() {
		return {
			uploadlist: [], //已上传图片数组
			images: [], //本地图片数组
			value: [], //提交图片数组
			action: 'https://xj.chuanghai-tech.com/patrol-app/v1/file/upload', //没用到的
			load: false
		}
	},
	methods: {
		// 选择图片-暂存本地图片
		change(id, index) {
			// 重置待上传图片数组
			this.images[index] = {}
			this.images[index].id = id
			this.images[index].imgArr = []
			this.$nextTick(() => {
				let lists = this.$refs.uUpload[index].lists
				lists.forEach((val) => {
					this.images[index].imgArr.push(val.url)
				})
			})
		},
		//提交
		async submit() {
			for (var index = 0; index < this.images.length; index++) {
				const item = this.images[index]
				this.uploadlist[index] = {}
				this.uploadlist[index].imgArr = []
				this.uploadlist[index].id = item.id

				await Promise.all(item.imgArr.map((url) => this.upload(url, item.id, index)))

				console.log('全部图片上传完成', JSON.stringify(this.uploadlist))
			}

			console.log('执行了后续操作')

			//生成图片字符串
			let uploadArr = JSON.parse(JSON.stringify(this.uploadlist))
			let imgStr = ''
			for (let i = 0; i < uploadArr.length; i++) {
				let len = uploadArr[i].imgArr.length
				if (len > 1) {
					imgStr = uploadArr[i].imgArr[0]
					for (let j = 1; j < len; j++) {
						imgStr = imgStr + ',' + uploadArr[i].imgArr[j]
					}
				} else if (len == 1) {
					imgStr = uploadArr[i].imgArr[0]
				} else {
					return (imgStr = '')
				}
				let obj = {}
				obj.id = uploadArr[i].id
				obj.value = imgStr
				this.value[i] = obj
			}
			//巡检图片数据提交
			let newarr = JSON.parse(JSON.stringify(this.value))
			let item = {
				id: this.scan_id,
				value: JSON.stringify(newarr)
			} //提交数据
			this.$store.state.user.items.push(item)
		},
		//上传图片API
		upload(item, id, index) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'https://xj.chuanghai-tech.com/patrol-app/v1/file/upload',
					filePath: item,
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						let showUrl = data.data
						this.uploadlist[index].imgArr.push(showUrl)
						resolve()
					},
					fail: (err) => {
						this.$refs.sacast.show({
							title: '图片不得超过10M',
							type: 'warning'
						})
						reject()
					}
				})
			})
		},
		//重置表单数据
		reset() {
			this.$nextTick(() => {
				this.$refs.uUpload.forEach((i) => {
					i.lists.length = 0
				})
			})
		}
	}
}
</script>

<style></style>