From 3ca2451b2f94dc7fbc6d657db27e0f3f85eb0ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A6=85=E9=A5=BC?= <2815246336@qq.com>
Date: Thu, 4 Sep 2025 21:21:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/work/inspection/scanSign/index.vue | 605 +++++++++++------------
 1 file changed, 286 insertions(+), 319 deletions(-)

diff --git a/pages/work/inspection/scanSign/index.vue b/pages/work/inspection/scanSign/index.vue
index 4bd88ba..257486a 100644
--- a/pages/work/inspection/scanSign/index.vue
+++ b/pages/work/inspection/scanSign/index.vue
@@ -38,326 +38,293 @@
 </template>
 
 <script>
-	import {
-		addRecord
-	} from "@/api/inspection/record.js"
-	// 如果你已有 uploadImg 封装且内部就是 uni.uploadFile，可以继续用；
-	// 但前提是它支持 H5 直接传 File 对象（不是 URL 字符串）。
-	// 这里我示范“直接用 uni.uploadFile”的写法，更稳妥。
-	import {
-		addWatermarkToImage
-	} from "@/utils/watermark.js"
-	import appConfig from '@/config'
-	const UPLOAD_URL = appConfig.baseUrl + "/common/upload" // 按你后端改
-
+	import { addRecord } from "@/api/inspection/record.js"
+	import { addWatermarkToImage } from "@/utils/watermark.js"
+	import appConfig from "@/config"
+	
+	// ------- URL 安全拼接，避免出现 /undefined/common/upload -------
+	function joinURL(base, path) {
+	  const b = (base || "").replace(/\/+$/, "")
+	  const p = (path || "").replace(/^\/+/, "")
+	  return `${b}/${p}`
+	}
+	const BASE_URL = appConfig?.baseUrl || (process.env.VUE_APP_BASE_API || "")
+	const UPLOAD_URL = joinURL(BASE_URL, "/common/upload")
+	
 	export default {
-		data() {
-			return {
-				form: {
-					inspectionType: 0,
-					inspectorId: this.$store.state.user.nickName,
-					inspectionPoint: "",
-					inspectionRequirements: "",
-					inspectionImg: "",
-					ImgUrl: [], // 存后端返回的文件名/URL
-					remark: ""
-				},
-				img: [], // 绑定给 uni-file-picker 的预览列表
-				sourceType: ['camera'],
-				msgType: '',
-				messageText: '',
-				isUploading: false,
-				isMobileBrowser: false
-			}
-		},
-		methods: {
-			async submit() {
-				if (this.isUploading) {
-					this.showMessage('warning', '图片正在上传中，请稍等')
-					return
-				}
-				if (!Array.isArray(this.form.ImgUrl) || this.form.ImgUrl.length === 0) {
-					this.showMessage('error', '请选择要上传的图片')
-					return
-				}
-				this.form.inspectionImg = this.joinList()
-				try {
-					const res = await addRecord(this.form)
-					if (res.code === 200) {
-						this.showMessage('success', '打卡成功')
-					} else {
-						this.showMessage('error', '打卡失败')
-					}
-				} catch (err) {
-					this.showMessage('error', `提交失败: ${err.message}`)
-				}
-			},
-
-			// uni-file-picker 删除：e.tempFile 里通常有 {url/path}，与你传给 value 的结构需一致
-			deleteImg(e) {
-				const url = e.tempFile?.url || e.tempFile?.path
-				const idx = this.img.findIndex(x => x.url === url)
-				if (idx !== -1) {
-					this.img.splice(idx, 1)
-					// 同步移除已上传结果（按你的业务，可以用同索引移除或按返回名移除）
-					this.form.ImgUrl.splice(idx, 1)
-				}
-			},
-
-			// 选择文件（支持多张）
-			async upload(e) {
-				if (!e?.tempFiles?.length) return
-				if (this.isUploading) {
-					this.showMessage('warning', '图片正在上传中，请稍等')
-					return
-				}
-
-				this.isUploading = true
-				try {
-					// 逐张处理
-					for (const tf of e.tempFiles) {
-						await this.handleImageUpload(tf) // 这里传入每个 tempFile
-					}
-					// this.showMessage('success', '图片处理/上传完成')
-				} catch (err) {
-					console.error(err)
-					this.showMessage('error', `图片上传失败：${err.message || err}`)
-				} finally {
-					this.isUploading = false
-				}
-			},
-
-			// 单张处理：加水印 ->（可选）压缩 -> 上传
-			async handleImageUpload(tempFile) {
-				// tempFile.file: H5 下是 File 对象；App/小程序是临时路径
-				const raw = tempFile.file || tempFile // 兼容各端
-				// 生成水印文字
-				const watermarkText = `${this.form.inspectionPoint || '未命名地点'} \n${this.getCurrentDate()}`
-				// 加水印（返回 File/Blob）
-				const watermarked = await addWatermarkToImage(raw, watermarkText)
-				// 可选：移动端压缩（你已有方法，按需启用）
-				//   const finalFile = await this.compressImageForMobile(watermarked)
-
-				const finalFile = watermarked
-
-				// 预览：用本地 URL，仅供前端显示
-				const previewUrl = URL.createObjectURL(finalFile)
-				this.img.push({
-					url: previewUrl, // uni-file-picker 识别 url
-					name: finalFile.name || `image_${Date.now()}.jpg`,
-					extname: 'jpg'
-				})
-
-				// 真正上传：**不要传 previewUrl 字符串**，而是传二进制 `file`
-				// H5 下：uni.uploadFile 支持传 `file: File`
-				const uploadedName = await this.uploadFileWithUni(finalFile)
-				// 回填后端返回的文件名/URL
-				this.form.ImgUrl.push(uploadedName)
-			},
-
-			// 用 uni.uploadFile 直接传二进制
-			uploadFileWithUni(file) {
-				return new Promise((resolve, reject) => {
-					uni.uploadFile({
-						url: UPLOAD_URL,
-						name: 'file', // 后端接收字段名（按你的后端改）
-						file, // H5 直接传 File 对象（重点！）
-						// 如果后端还需要额外字段：
-						// formData: { bizType: 'inspection' },
-						success: (res) => {
-							try {
-								const data = typeof res.data === 'string' ? JSON.parse(res.data) : res
-									.data
-								if (data.code === 200) {
-									// 假设后端返回 { code:200, fileName: 'xxx.jpg', url:'...' }
-									resolve(data.fileName || data.url)
-								} else {
-									reject(new Error(data.msg || '上传失败'))
-								}
-							} catch (e) {
-								reject(new Error('上传响应解析失败'))
-							}
-						},
-						fail: (err) => reject(err)
-					})
-				})
-			},
-
-			cancel() {
-				uni.reLaunch({
-					url: '/pages/work/index'
-				})
-			},
-
-			joinList() {
-				return this.form.ImgUrl.join(',')
-			},
-
-			getCurrentDate() {
-				const now = new Date()
-				const y = now.getFullYear()
-				const m = String(now.getMonth() + 1).padStart(2, '0')
-				const d = String(now.getDate()).padStart(2, '0')
-				const hh = String(now.getHours()).padStart(2, '0')
-				const mm = String(now.getMinutes()).padStart(2, '0')
-				const ss = String(now.getSeconds()).padStart(2, '0')
-				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
-			},
-
-			dialogConfirm() {
-				if (this.msgType === 'success') {
-					uni.reLaunch({
-						url: '/pages/work/index'
-					})
-				}
-			},
-
-			showMessage(type, text) {
-				this.msgType = type
-				this.messageText = text
-				this.$refs.alertDialog.open()
-			},
-
-			checkMobileBrowser() {
-				const ua = navigator.userAgent.toLowerCase()
-				const isMobile = /iphone|ipod|android|windows phone|mobile|blackberry/.test(ua)
-				this.isMobileBrowser = isMobile || window.__uniAppWebview
-			},
-			// 计算目标尺寸
-			calcTargetSize(imgW, imgH, maxW, maxH) {
-				let w = imgW,
-					h = imgH
-				if (w > maxW || h > maxH) {
-					const ratio = Math.min(maxW / w, maxH / h)
-					w = Math.round(w * ratio)
-					h = Math.round(h * ratio)
-				}
-				return {
-					w,
-					h
-				}
-			},
-
-			// iOS 兼容 toBlob（老 Safari）
-			canvasToBlob(canvas, type, quality) {
-				return new Promise((resolve) => {
-					if (canvas.toBlob) {
-						canvas.toBlob((blob) => resolve(blob), type, quality)
-					} else {
-						// fallback: toDataURL -> Blob
-						const dataURL = canvas.toDataURL(type, quality)
-						const arr = dataURL.split(',')
-						const mime = arr[0].match(/:(.*?);/)[1]
-						const bstr = atob(arr[1])
-						let n = bstr.length
-						const u8arr = new Uint8Array(n)
-						while (n--) u8arr[n] = bstr.charCodeAt(n)
-						resolve(new Blob([u8arr], {
-							type: mime
-						}))
-					}
-				})
-			},
-
-			// H5: DataURL -> File
-			blobToFile(blob, filename) {
-				return new File([blob], filename || `img_${Date.now()}.jpg`, {
-					type: blob.type || 'image/jpeg'
-				})
-			},
-
-			/**
-			 * 压缩图片（移动端友好）
-			 * @param {File|Object|String} input  H5: File；小程序/APP：tempFile 对象或临时路径
-			 * @param {Object} opts  { quality: 0.6, maxWidth: 1200, maxHeight: 1200, mime: 'image/jpeg' }
-			 * @returns Promise<File|string>  H5 返回 File；小程序/APP 返回压缩后的临时路径
-			 */
-			async compressImageForMobile(input, opts = {}) {
-				const {
-					quality = 0.6,
-						maxWidth = 1200,
-						maxHeight = 1200,
-						mime = 'image/jpeg'
-				} = opts
-
-				// #ifdef H5
-				// —— H5：使用 canvas 压缩 —— //
-				const file = input instanceof File ? input : (input?.file instanceof File ? input.file : null)
-				if (!file) return input // 没拿到 File 就直接返回原始值
-
-				// 读取为 dataURL
-				const dataURL = await new Promise((resolve, reject) => {
-					const reader = new FileReader()
-					reader.onload = () => resolve(reader.result)
-					reader.onerror = () => reject(new Error('文件读取失败'))
-					reader.readAsDataURL(file)
-				})
-
-				// 图片加载
-				const img = await new Promise((resolve, reject) => {
-					const image = new Image()
-					image.onload = () => resolve(image)
-					image.onerror = () => reject(new Error('图片加载失败'))
-					image.src = dataURL
-				})
-
-				const {
-					w,
-					h
-				} = this.calcTargetSize(img.width, img.height, maxWidth, maxHeight)
-				// 如果尺寸本来就不大，直接走质量压缩（或原图）
-				const canvas = document.createElement('canvas')
-				canvas.width = w
-				canvas.height = h
-				const ctx = canvas.getContext('2d')
-				ctx.imageSmoothingQuality = 'high'
-				ctx.drawImage(img, 0, 0, w, h)
-
-				const blob = await this.canvasToBlob(canvas, mime, quality)
-				if (!blob) return file
-
-				// 若压缩后反而更大，则返回原图
-				if (blob.size > file.size) return file
-
-				return this.blobToFile(blob, file.name)
-				// #endif
-
-				// #ifdef MP-WEIXIN || APP-PLUS
-				// —— 小程序 / APP：使用 uni.compressImage —— //
-				// 允许传入 input 为对象（如 tempFile）或字符串路径
-				const srcPath = typeof input === 'string' ?
-					input :
-					(input?.tempFilePath || input?.path || input?.filePath)
-
-				if (!srcPath) return input
-
-				// uni.compressImage 文档：quality 0-100，部分端支持 width/height
-				const q = Math.max(1, Math.min(100, Math.round(quality * 100)))
-
-				// 尝试带上 width/height（端上不支持也会忽略）
-				const compressed = await new Promise((resolve, reject) => {
-					uni.compressImage({
-						src: srcPath,
-						quality: q,
-						width: maxWidth,
-						height: maxHeight,
-						success: (res) => resolve(res.tempFilePath || res.apFilePath || res.target ||
-							res.path),
-						fail: (err) => reject(err)
-					})
-				})
-				return compressed
-				// #endif
-			},
-		},
-		onLoad(option) {
-			this.form.inspectionPoint = option.inspectionPoint || ''
-			this.form.inspectionRequirements = option.inspectionRequirements || ''
-			this.form.inspectionPointId = option.inspectionPointId || ''
-		},
-		mounted() {
-			this.checkMobileBrowser()
-		}
+	  data() {
+	    return {
+	      form: {
+	        inspectionType: 0,
+	        inspectorId: this.$store.state.user.nickName,
+	        inspectionPoint: "",
+	        inspectionRequirements: "",
+	        inspectionImg: "",
+	        ImgUrl: [], // 后端返回的文件名/URL
+	        remark: ""
+	      },
+	      img: [], // uni-file-picker 预览
+	      sourceType: ["camera"],
+	      msgType: "",
+	      messageText: "",
+	      isUploading: false,
+	      isMobileBrowser: false
+	    }
+	  },
+	  methods: {
+	    async submit() {
+	      if (this.isUploading) {
+	        this.showMessage("warning", "图片正在上传中，请稍等")
+	        return
+	      }
+	      if (!Array.isArray(this.form.ImgUrl) || this.form.ImgUrl.length === 0) {
+	        this.showMessage("error", "请选择要上传的图片")
+	        return
+	      }
+	      this.form.inspectionImg = this.joinList()
+	      try {
+	        const res = await addRecord(this.form)
+	        if (res.code === 200) {
+	          this.showMessage("success", "打卡成功")
+	        } else {
+	          this.showMessage("error", res.msg || "打卡失败")
+	        }
+	      } catch (err) {
+	        this.showMessage("error", `提交失败: ${err.message}`)
+	      }
+	    },
+	
+	    // 删除预览 & 同步删除结果
+	    deleteImg(e) {
+	      const url = e?.tempFile?.url || e?.tempFile?.path
+	      const idx = this.img.findIndex((x) => x.url === url)
+	      if (idx !== -1) {
+	        // 释放预览 URL 内存
+	        try {
+	          const toRevoke = this.img[idx]?.url
+	          toRevoke && toRevoke.startsWith("blob:") && URL.revokeObjectURL(toRevoke)
+	        } catch {}
+	        this.img.splice(idx, 1)
+	        this.form.ImgUrl.splice(idx, 1)
+	      }
+	    },
+	
+	    // 选择文件（支持多张）
+	    async upload(e) {
+	      if (!e?.tempFiles?.length) return
+	      if (this.isUploading) {
+	        this.showMessage("warning", "图片正在上传中，请稍等")
+	        return
+	      }
+	
+	      this.isUploading = true
+	      try {
+	        for (const tf of e.tempFiles) {
+	          await this.handleImageUpload(tf)
+	        }
+	      } catch (err) {
+	        console.error(err)
+	        this.showMessage("error", `图片上传失败：${err.message || err}`)
+	      } finally {
+	        this.isUploading = false
+	      }
+	    },
+	
+	    // 单张：加水印 -> 压缩(H5) -> 预览 -> 上传
+	    async handleImageUpload(tempFile) {
+	      // H5：uni-file-picker 的 e.tempFiles[i].file 就是 File
+	      const rawFile =
+	        tempFile?.file instanceof File
+	          ? tempFile.file
+	          : tempFile instanceof File
+	          ? tempFile
+	          : null
+	      if (!rawFile) {
+	        throw new Error("未获取到有效的 File 对象（仅支持 H5）")
+	      }
+	
+	      const watermarkText = `${this.form.inspectionPoint || "未命名地点"} \n${this.getCurrentDate()}`
+	
+	      // 水印（返回 Blob 或 File）
+	      let watermarked = await addWatermarkToImage(rawFile, watermarkText)
+	      if (!(watermarked instanceof File)) {
+	        // 统一转回 File
+	        watermarked = this.blobToFile(
+	          watermarked,
+	          rawFile.name || `image_${Date.now()}.jpg`
+	        )
+	      }
+	
+	      // 压缩（仅 H5）
+	      const finalFile = await this.compressImageForMobile(watermarked, {
+	        quality: 0.6,
+	        maxWidth: 1200,
+	        maxHeight: 1200,
+	        mime: "image/jpeg"
+	      })
+	
+	      // 预览（本地 blob URL）
+	      const previewUrl = URL.createObjectURL(finalFile)
+	      this.img.push({
+	        url: previewUrl,
+	        name: finalFile.name || `image_${Date.now()}.jpg`,
+	        extname: "jpg"
+	      })
+	
+	      // 上传（H5 用 file 字段）
+	      const uploadedName = await this.uploadFileWithUni(finalFile)
+	      this.form.ImgUrl.push(uploadedName)
+	
+	      // 可选：延时释放预览 URL，避免立即失效
+	      setTimeout(() => {
+	        try {
+	          URL.revokeObjectURL(previewUrl)
+	        } catch {}
+	      }, 30000)
+	    },
+	
+	    // —— 仅 H5：File 压缩（canvas 尺寸+质量）——
+	    async compressImageForMobile(file, opts = {}) {
+	      const { quality = 0.6, maxWidth = 1200, maxHeight = 1200, mime = "image/jpeg" } = opts
+	      if (!(file instanceof File)) return file
+	
+	      const dataURL = await new Promise((resolve, reject) => {
+	        const reader = new FileReader()
+	        reader.onload = () => resolve(reader.result)
+	        reader.onerror = () => reject(new Error("文件读取失败"))
+	        reader.readAsDataURL(file)
+	      })
+	
+	      const img = await new Promise((resolve, reject) => {
+	        const image = new Image()
+	        image.onload = () => resolve(image)
+	        image.onerror = () => reject(new Error("图片加载失败"))
+	        image.src = dataURL
+	      })
+	
+	      const { w, h } = this.calcTargetSize(img.width, img.height, maxWidth, maxHeight)
+	      const canvas = document.createElement("canvas")
+	      canvas.width = w
+	      canvas.height = h
+	      const ctx = canvas.getContext("2d")
+	      ctx.imageSmoothingQuality = "high"
+	      ctx.drawImage(img, 0, 0, w, h)
+	
+	      const blob = await this.canvasToBlob(canvas, mime, quality)
+	      if (!blob) return file
+	      if (blob.size >= file.size) return file // 压缩后更大就不压了
+	      return this.blobToFile(blob, file.name)
+	    },
+	
+	    // 计算目标尺寸
+	    calcTargetSize(imgW, imgH, maxW, maxH) {
+	      let w = imgW,
+	        h = imgH
+	      if (w > maxW || h > maxH) {
+	        const ratio = Math.min(maxW / w, maxH / h)
+	        w = Math.round(w * ratio)
+	        h = Math.round(h * ratio)
+	      }
+	      return { w, h }
+	    },
+	
+	    // toBlob 兼容
+	    canvasToBlob(canvas, type, quality) {
+	      return new Promise((resolve) => {
+	        if (canvas.toBlob) {
+	          canvas.toBlob((blob) => resolve(blob), type, quality)
+	        } else {
+	          const dataURL = canvas.toDataURL(type, quality)
+	          const arr = dataURL.split(",")
+	          const mime = arr[0].match(/:(.*?);/)[1]
+	          const bstr = atob(arr[1])
+	          let n = bstr.length
+	          const u8arr = new Uint8Array(n)
+	          while (n--) u8arr[n] = bstr.charCodeAt(n)
+	          resolve(new Blob([u8arr], { type: mime }))
+	        }
+	      })
+	    },
+	
+	    // Blob -> File
+	    blobToFile(blob, filename) {
+	      return new File([blob], filename || `img_${Date.now()}.jpg`, {
+	        type: blob.type || "image/jpeg"
+	      })
+	    },
+	
+	    // H5: 用 uni.uploadFile 直接传二进制 File
+	    uploadFileWithUni(file) {
+	      return new Promise((resolve, reject) => {
+	        uni.uploadFile({
+	          url: UPLOAD_URL,
+	          name: "file",
+	          file, // H5 传 File；不要传 filePath
+	          success: (res) => {
+	            try {
+	              const data = typeof res.data === "string" ? JSON.parse(res.data) : res.data
+	              if (data.code === 200) {
+	                resolve(data.fileName || data.url)
+	              } else {
+	                reject(new Error(data.msg || "上传失败"))
+	              }
+	            } catch (e) {
+	              reject(new Error("上传响应解析失败"))
+	            }
+	          },
+	          fail: (err) => reject(err)
+	        })
+	      })
+	    },
+	
+	    cancel() {
+	      uni.reLaunch({ url: "/pages/work/index" })
+	    },
+	
+	    joinList() {
+	      return this.form.ImgUrl.join(",")
+	    },
+	
+	    getCurrentDate() {
+	      const now = new Date()
+	      const y = now.getFullYear()
+	      const m = String(now.getMonth() + 1).padStart(2, "0")
+	      const d = String(now.getDate()).padStart(2, "0")
+	      const hh = String(now.getHours()).padStart(2, "0")
+	      const mm = String(now.getMinutes()).padStart(2, "0")
+	      const ss = String(now.getSeconds()).padStart(2, "0")
+	      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+	    },
+	
+	    dialogConfirm() {
+	      if (this.msgType === "success") {
+	        uni.reLaunch({ url: "/pages/work/index" })
+	      }
+	    },
+	
+	    showMessage(type, text) {
+	      this.msgType = type
+	      this.messageText = text
+	      this.$refs.alertDialog.open()
+	    },
+	
+	    checkMobileBrowser() {
+	      const ua = navigator.userAgent.toLowerCase()
+	      const isMobile = /iphone|ipod|android|windows phone|mobile|blackberry/.test(ua)
+	      this.isMobileBrowser = isMobile || window.__uniAppWebview
+	    }
+	  },
+	  onLoad(option) {
+	    this.form.inspectionPoint = option.inspectionPoint || ""
+	    this.form.inspectionRequirements = option.inspectionRequirements || ""
+	    this.form.inspectionPointId = option.inspectionPointId || ""
+	  },
+	  mounted() {
+	    if (!BASE_URL) {
+	      console.warn("[上传] baseUrl 未配置，当前上传地址可能异常：", UPLOAD_URL)
+	    }
+	    this.checkMobileBrowser()
+	  }
 	}
 </script>