安装协议获取签名并上传七牛云获取真实url成功

pages/InstallationAgreement/InstallationAgreement.vue

@@ -39,6 +39,12 @@
         type="error"
         @click="onClick('clear')"
       ></uv-button>
+      <uv-button
+        customStyle="margin-top: 10px"
+        text="确认签名"
+        type="primary"
+        @click="onClick('save')"
+      ></uv-button>
       <uv-button
         customStyle="margin-top: 10px"
         text="提交协议"
@@ -58,27 +64,21 @@
 </template>
 
 <script>
+import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'
+
 export default {
   data() {
     return {
+      tempUrl: '',
       userInfo: {
         name: '',
         code: '',
         phone: '',
         location: '',
         businessLicense: '',
+        signatureUrl: '',
       },
-      actions: [
-        {
-          name: '男',
-        },
-        {
-          name: '女',
-        },
-        {
-          name: '保密',
-        },
-      ],
+
       rules: {
         name: {
           type: 'string',
@@ -122,6 +122,7 @@ export default {
     },
     // 提交
     submit() {
+      this.onClick('save')
       // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
       this.$refs.form
         .validate()
@@ -152,29 +153,25 @@ export default {
       uni.hideKeyboard()
     },
     onClick(type) {
-      if (type == 'openSmooth') {
+      if (type === 'openSmooth') {
         this.openSmooth = !this.openSmooth
         return
       }
-      if (type == 'save') {
+      if (type === 'save') {
         this.$refs.signatureRef.canvasToTempFilePath({
-          success: res => {
+          success: async res => {
             // 是否为空画板 无签名
             console.log(res.isEmpty)
+            console.log('@@@@@')
+            console.log('@@@@@', res)
+
             // 生成图片的临时路径
             // H5 生成的是base64
-            this.url = res.tempFilePath
-            console.log(res.tempFilePath)
-            // uni.saveImageToPhotosAlbum({
-            //   filePath: res.tempFilePath,
-            //   success: () => {
-            //     uni.showToast({ title: '已保存到相册' })
-            //   },
-            // })
-            uni.previewImage({
-              urls: [res.tempFilePath],
-              current: 0,
-            })
+            this.tempUrl = res.tempFilePath
+            console.log('临时路径', res.tempFilePath)
+
+            this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
+            console.log('签名路径', this.userInfo.signatureUrl)
           },
         })
         return

utils/tempUrl-to-realUrl.js

@@ -0,0 +1,150 @@
+import { getQiniuUploadToken, uploadToQiniu } from '@/api/upload.js'
+
+/**
+ * 七牛云图片上传服务
+ * 将临时文件路径转换为七牛云URL
+ * @param {string} tempFilePath - 临时文件路径
+ * @param {object} [options] - 配置选项
+ * @returns {Promise<string>} 七牛云文件URL
+ */
+export const tempUrlToRealUrl = async (tempFilePath, options = {}) => {
+  const {
+    maxSize = 10,
+    prefix = 'uploads/',
+    showToast = true,
+    domain = 'https://api.ccttiot.com',
+  } = options
+
+  try {
+    // 1. 检查文件大小
+    const fileInfo = await getFileInfo(tempFilePath)
+    const sizeInMB = fileInfo.size / (1024 * 1024)
+
+    if (sizeInMB > maxSize) {
+      throw new Error(`文件大小不能超过 ${maxSize}MB`)
+    }
+
+    // 2. 获取上传凭证
+    const token = await getQiniuToken()
+    if (!token) {
+      throw new Error('获取上传凭证失败')
+    }
+
+    // 3. 生成唯一文件名
+    const fileExt = getFileExtension(tempFilePath)
+    const key = generateUniqueKey(prefix, fileExt)
+
+    // 4. 上传到七牛云
+    const uploadResult = await uploadToQiniu(tempFilePath, token, key)
+
+    if (!uploadResult || !uploadResult.key) {
+      throw new Error('上传失败：未返回有效结果')
+    }
+
+    // 5. 构建完整URL
+    const qiniuUrl = `${domain}/${uploadResult.key}`
+
+    if (showToast) {
+      uni.showToast({ title: '上传成功', icon: 'success' })
+    }
+
+    return qiniuUrl
+  } catch (error) {
+    console.error('七牛云上传失败:', error)
+    if (showToast) {
+      uni.showToast({
+        title: error.message || '上传失败',
+        icon: 'none',
+      })
+    }
+    throw error
+  }
+}
+
+/**
+ * 批量上传多张图片
+ * @param {string[]} tempFilePaths - 临时文件路径数组
+ * @returns {Promise<string[]>} 七牛云URL数组
+ */
+export const batchUploadToQiniu = async tempFilePaths => {
+  return Promise.all(
+    tempFilePaths.map(filePath => uploadToQiniuUrl(filePath, { showToast: false }))
+  )
+}
+
+/**
+ * 获取文件信息
+ * @private
+ */
+const getFileInfo = filePath => {
+  return new Promise((resolve, reject) => {
+    uni.getFileInfo({
+      filePath,
+      success: resolve,
+      fail: reject,
+    })
+  })
+}
+
+/**
+ * 获取七牛云上传token
+ * @private
+ */
+const getQiniuToken = async () => {
+  try {
+    const res = await getQiniuUploadToken()
+
+    if (res.code === 200) {
+      // 兼容不同返回格式
+      return res.data?.token || res.data
+    } else {
+      throw new Error(res.msg || '获取token失败')
+    }
+  } catch (error) {
+    console.error('获取七牛云token失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 获取文件扩展名
+ * @private
+ */
+const getFileExtension = filePath => {
+  const parts = filePath.split('.')
+  return parts.length > 1 ? parts.pop().toLowerCase() : 'jpg'
+}
+
+/**
+ * 生成唯一文件名
+ * @private
+ */
+const generateUniqueKey = (prefix, extension) => {
+  const timestamp = Date.now()
+  const randomStr = Math.random().toString(36).slice(2, 10)
+  return `${prefix}${timestamp}_${randomStr}.${extension}`
+}
+
+/**
+ * 工具函数：检查是否为临时路径
+ * @param {string} url - 要检查的URL
+ */
+export const isTempFilePath = url => {
+  return (
+    url &&
+    (url.startsWith('http://temp/') ||
+      url.startsWith('wxfile://') ||
+      url.includes('tmp/') ||
+      !url.startsWith('http'))
+  )
+}
+
+/**
+ * 工具函数：从七牛云URL提取文件key
+ * @param {string} qiniuUrl - 七牛云完整URL
+ */
+export const extractQiniuKey = qiniuUrl => {
+  if (!qiniuUrl) return null
+  const urlObj = new URL(qiniuUrl)
+  return urlObj.pathname.substring(1) // 去除开头的/
+}