签名问题

src/pages/my/signature.vue

@@ -34,7 +34,7 @@ let signType = ref(0)
 const opts = reactive({})
 
 onLoad((opt) => {
-    // console.log('🚀 ~ onLoad ~ opt:', opt)   
+    // console.log('🚀 ~ onLoad ~ opt:', opt)
     const params = opt.params ? JSON.parse(opt.params) : {}
     Object.assign(opts, params)
     if (opts.isLease) {
@@ -91,30 +91,24 @@ const getSignData = () => {
         })
 }
 
-function base64ToBlob(base64Data) {
-    // 分离Base64的MIME类型和实际数据
-    const parts = base64Data.split(';base64,');
-    const contentType = parts[0].split(':')[1];
-    const raw = window.atob(parts[1]);
-    const rawLength = raw.length;
-    const uInt8Array = new Uint8Array(rawLength);
-    
-    for (let i = 0; i < rawLength; ++i) {
-        uInt8Array[i] = raw.charCodeAt(i);
-    }
-    
-    return new Blob([uInt8Array], { type: contentType });
-}
-
-function blobToFile(blob, fileName) {
-    return new File([blob], fileName, { type: blob.type });
-}
-
-
 // 签名完成
 const complete = (e) => {
     signType.value = 0
-    console.log(e) // 返回本地生成的base图片路径
+    // console.log(e) // 返回本地生成的base图片路径
+    const img = new Image()
+    img.src = e
+    img.onload = () => {
+        const canvas = document.createElement('canvas')
+        canvas.width = img.width
+        canvas.height = img.height
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0)
+
+        // 转换为 WebP 格式，质量 0.8
+        const webpBase64 = canvas.toDataURL('image/webp', 0.8)
+
+        console.log('🚀 ~ WebP base64:', webpBase64)
+    }
     uploadImg2(e)
 }
 
@@ -148,70 +142,45 @@ const handlePhoto = () => {
     })
 }
 // 上传
-const uploadImg2 = (base64Data) => {
+const uploadImg2 = async (base64Data) => {
-    // 1. 将Base64转换为Blob
+    try {
-    const blob = base64ToBlob(base64Data);
+        const signUrl = base64Data
-    
+        if (opts.isLease) {
-    // 2. 将Blob转换为File（uni-app的uploadFile也可以直接使用Blob）
+            const params = {
-    const file = blobToFile(blob, 'image.png');
+                id: opts.id,
-    console.log('🚀 ~ uploadImg ~ file:', file)
+                leaseSignUrl: signUrl,
-    
+                leaseSignType: signType.value,
-    // 3. 创建FormData（H5环境下需要）
-    const formData = new FormData();
-    formData.append('file', file);
-    uni.uploadFile({
-        url: '/file/upload',
-        // filePath: file,
-        name: 'file',
-        formData: formData,
-        header: {
-            // Authorization: this.token,
-        },
-        success: async (res) => {
-            console.log('🚀 ~ uploadImg ~ res:', res)
-            try {
-                const signUrl = JSON.parse(res.data).data.url
-                if (opts.isLease) {
-                    const params = {
-                        id: opts.id,
-                        leaseSignUrl: signUrl,
-                        leaseSignType: signType.value,
-                    }
-                    console.log('🚀 ~ success: ~ params:', params)
-                    const res = await updateLeaseApplyInfoSign(params)
-                    console.log('🚀 ~ uploadImg-领料 ~ res:', res)
-                    uni.navigateBack()
-                } else if (opts.isBack) {
-                    const params = {
-                        id: opts.id,
-                        backSignUrl: signUrl,
-                        backSignType: signType.value,
-                    }
-                    console.log('🚀 ~ success: ~ params:', params)
-                    const res = await updateSignById(params)
-                    console.log('🚀 ~ uploadImg-退料 ~ res:', res)
-                    uni.navigateBack()
-                } else {
-                    const params = {
-                        signUrl: signUrl,
-                        signType: signType.value,
-                    }
-                    const res = await updateSign(params)
-                    console.log('🚀 ~ uploadImg-个人中心 ~ res:', res)
-                    getSignData()
-                }
-            } catch (error) {
-                console.log('🚀 ~ uploadImg ~ error:', error)
-                uni.showToast({
-                    title: '上传失败',
-                    icon: 'none',
-                })
             }
-        },
+            console.log('🚀 ~ success: ~ params:', params)
-        fail: (err) => {
+            const res = await updateLeaseApplyInfoSign(params)
-            console.log('🚀 ~ uploadImg ~ err:', err)
+            console.log('🚀 ~ uploadImg-领料 ~ res:', res)
-        },
+            uni.navigateBack()
-    })
+        } else if (opts.isBack) {
+            const params = {
+                id: opts.id,
+                backSignUrl: signUrl,
+                backSignType: signType.value,
+            }
+            console.log('🚀 ~ success: ~ params:', params)
+            const res = await updateSignById(params)
+            console.log('🚀 ~ uploadImg-退料 ~ res:', res)
+            uni.navigateBack()
+        } else {
+            const params = {
+                signUrl: signUrl,
+                signType: signType.value,
+            }
+            const res = await updateSign(params)
+            console.log('🚀 ~ uploadImg-个人中心 ~ res:', res)
+            getSignData()
+        }
+    } catch (error) {
+        console.log('🚀 ~ uploadImg ~ error:', error)
+        uni.showToast({
+            title: '上传失败',
+            icon: 'none',
+        })
+    }
 }
 const uploadImg = (path) => {
     uni.uploadFile({