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://www.jxydyw.cn/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://www.jxydyw.cn/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>