编辑消防设施的照片上传

pagesA/fire/fire_device/edit_device/edit_device.vue

@@ -18,10 +18,11 @@
 						<u-input v-model="formData.fpdCode" placeholder="请输入设施编号	" />
 					</u-form-item>
 					<u-form-item label="设施二维码">
-						<img :src="formData.fpdQcode" alt="设施二维码" style='width: 300upx;height: 300upx;'  @click="viewImageBig(formData.fpdQcode)">
+						<img :src="formData.fpdQcode" alt="设施二维码" style='width: 300upx;height: 300upx;'
+							@click="viewImageBig(formData.fpdQcode)">
 					</u-form-item>
 
-<!-- 					<u-form-item label="设备状态" @click="
+					<!-- 					<u-form-item label="设备状态" @click="
 							showSex4 = true;
 							hideKeyboard();
 						">
@@ -56,7 +57,7 @@
 					<view v-for="(items,indexs) in formData.picVOList" :key="indexs">
 						<view style="display:flex;align-items:center;justify-content:space-between;">
 							<view style="position: relative;width: 180rpx;float: left;margin: 10rpx 15rpx 0 0rpx;">
-								<image :src="items.url"  @click="viewImageBig(items.url)"
+								<image :src="items.url" @click="viewImageBig(items.url)"
 									style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
 									<u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(items,indexs)">
 									</u-icon>
@@ -142,8 +143,8 @@
 					status: '0',
 					orgName: '',
 					picVOList: [],
-					fpdTypeName:'',
-					fpdType:''
+					fpdTypeName: '',
+					fpdType: ''
 				},
 				fileList1: [],
 				// 用于显示下拉确认内容，不作为提交
@@ -194,7 +195,7 @@
 
 					if (res.data.fpdType == i.id) {
 						this.formData.fpdTypeName = i.name
-						this.formData.fpdType=i.id
+						this.formData.fpdType = i.id
 					}
 				})
 
@@ -237,7 +238,7 @@
 
 		methods: {
 			viewImageBig(i) {
-				let imgList=[]
+				let imgList = []
 				imgList.push(i)
 				uni.previewImage({
 					urls: imgList,
@@ -247,67 +248,74 @@
 			// ===
 			closeImage(val, index) {
 				this.formData.picVOList.splice(index, 1)
-		
+
 			},
 			photoUpload() {
-				let pictures = [];
 				let that = this;
+
+				function uploadImage(filePath) {
+					return new Promise((resolve, reject) => {
+						uni.uploadFile({
+							url: baseUrl + '/admin-api/infra/file/upload',
+							filePath: filePath,
+							name: 'file',
+							header: {
+								"Authorization": 'Bearer ' + getAccessToken(),
+							},
+							success: (res) => {
+								let imgUrl = JSON.parse(res.data);
+								resolve(imgUrl.data); // 返回图片地址
+							},
+							fail: () => {
+								reject();
+							}
+						});
+					});
+				}
+
+				function displayImage(url) {
+					return new Promise((resolve, reject) => {
+						loadImage(
+							url,
+							function(canvas) {
+								canvas.toBlob(function(blob) {
+									const compressedFile = blob;
+									const fileUrl = URL.createObjectURL(compressedFile);
+									that.formData.picVOList.push({
+										url: url,
+										picname: ''
+									});
+									that.$forceUpdate();
+									URL.revokeObjectURL(fileUrl);
+									resolve();
+								}, 'image/jpeg', 0.6);
+							}, {
+								canvas: true,
+								maxWidth: 800
+							}
+						);
+					});
+				}
+
 				uni.chooseImage({
-					sourceType: ['camera'], //实现拍照
+					sourceType: ['camera'],
 					count: 3,
 					sizeType: ['original', 'compressed'],
-					// sourceType: ['album','camera'], //打开系统相册
 					success(res) {
-						that.loading = true
-						if (Array.isArray(res.tempFilePaths)) { //从相册选择有三张的情况
-							res.tempFilePaths.forEach(item => {
-								loadImage(
-									item,
-									function(canvas) {
-										canvas.toBlob(function(blob) {
-											// 压缩后的 Blob 对象
-											const compressedFile = blob;
-											// 将压缩后的文件 `compressedFile` 转换为临时URL
-											const fileUrl = URL.createObjectURL(
-												compressedFile);
-											uni.uploadFile({
-												url: baseUrl +
-													'/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口    
-												filePath: item,
-												name: 'file',
-												header: {
-													"Authorization": 'Bearer ' +
-														getAccessToken(),
-												}, //请求token
-												success: (res) => {
-													let imgUrl = JSON.parse(res
-														.data)
-													that.loading = false
-													//拍照下展示的图片
-													that.formData.picVOList.push({
-														url: imgUrl.data,
-														picname: ''
-													})
-			
-													that.$forceUpdate();
-													// // 返回的url
-												},
-												fail: () => {
-													that.loading = false
-											
-												}
-											})
-											URL.revokeObjectURL(fileUrl);
-										}, 'image/jpeg', 0.6); // 设置压缩后的图片格式为 JPEG，压缩质量为 0.6
-									}, {
-										canvas: true,
-										maxWidth: 800
-									} // 设置最大宽度为 800px
-								);
-							})
+						that.loading = true;
+						if (Array.isArray(res.tempFilePaths)) {
+							res.tempFilePaths.forEach(async (item) => {
+								try {
+									const imgUrl = await uploadImage(item);
+									await displayImage(imgUrl);
+									that.loading = false;
+								} catch (error) {
+									that.loading = false;
+								}
+							});
 						}
 					}
-				})
+				});
 			},
 			submit(ref) {
 				this.$refs[ref]
@@ -329,15 +337,15 @@
 								item.fpdid = this.formData.id
 							}
 						});
-				
+
 						var jsdata = JSON.stringify(this.formData);
-					
+
 						updateDevice(jsdata).then(response => {
 							uni.showLoading({
 								title: response.data.msg
 							});
 							setTimeout(() => {
-						
+
 								uni.navigateBack({
 									delta: 1
 								})