vue3 微信小程序，uni-app 签字版插件sp-sign-board。上传图片

电脑版发表于：2025/2/10 16:57

插件地址：https://ext.dcloud.net.cn/plugin?id=14966

文档：https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-sign-board/sp-sign-board.html

### 基础使用
```
<template>
  <view class="upLoadSigns-container">
    <view class="sign-area">
      <sp-sign-board
        ref="signBoardRef"
        sid="sign-board"
        :horizontal="false"
        bgColor="#ffffff"
        :mark-text="markText"
        :needBack="false"
        @reset="reset"
        @firstTouchStart="firstTouchStart"
        @confirm = "signConfirm"
      ></sp-sign-board>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { onLoad,onUnload } from '@dcloudio/uni-app'


const markText = ref([] as any)
const signBoardRef = ref()

onLoad(() => {

  // 图片签字完成后执行的方法
  uni.$on('getSignImg', (e) => {
     console.log("签字完成了",e)
  })

  refreshMark()
})

// 页面关闭的时候把监听的事件注销掉，不然下次在进入页面的时候会多次触发
onUnload(()=>{
  console.log("页面关闭了....")
  uni.$off('getSignImg')
})

function refreshMark() {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = String(currentDate.getMonth() + 1).padStart(2, '0')
  const day = String(currentDate.getDate()).padStart(2, '0')
  const hours = String(currentDate.getHours()).padStart(2, '0')
  const minutes = String(currentDate.getMinutes()).padStart(2, '0')
  const seconds = String(currentDate.getSeconds()).padStart(2, '0')

  // markText.value  = [`${year}-${month}-${day}`, `${hours}:${minutes}:${seconds}`]
  markText.value = ["tnblog"]
}

const signConfirm = ()=>{
   console.log("点击了确认....")
}

function firstTouchStart() {
  // 在第一次开始触碰时，更新一下时间水印，防止滞留时间太长造成时间误差（非必要）
  refreshMark()
  // 手动调用组件内绘制水印方法重新绘制
  signBoardRef.value.drawMark(markText.value)
}

function reset() {
  refreshMark()
}

</script>

<style lang="scss">
/* 为页面根元素设置背景颜色 
page {
  background-color: #f7f7f8;
}*/
</style>


<style lang="scss" scoped>


.sign-area {
  width: 100%;
  height: calc(100vh - 44px);
}

</style>
```

### 包含上传图片的
```
<template>
  <view class="upLoadSigns-container">
    <view class="sign-area">
      <sp-sign-board
        ref="signBoardRef"
        sid="sign-board"
        :horizontal="false"
        bgColor="#ffffff"
        :mark-text="markText"
        :needBack="false"
        @reset="reset"
        @firstTouchStart="firstTouchStart"
        @confirm="signConfirm"
      ></sp-sign-board>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { ApiBaseUrl } from '@/common/sysconfig'
import request from '@/common/Http'

const markText = ref([] as any)
const signBoardRef = ref()

onLoad((_params) => {

  state.subTrainingId = _params?.subTrainingId

  // 图片签字完成后执行的方法
  uni.$on('getSignImg', (e) => {
    // console.log('签字完成了', e)

    // e.base64可以拿到base64的格式。e.path可以拿到临时路径，这里使用临时路径直接上传图片更加方便一些
    uploadFile(e.path)
  })

  refreshMark()
})

// 页面关闭的时候把监听的事件注销掉，不然下次在进入页面的时候会多次触发
onUnload(() => {
  uni.$off('getSignImg')
})

const state = reactive({
  subTrainingId:"",
  UpLoadData: {} as any
})


const getToken = () => {
  let info = uni.getStorageSync('loginInfo')
  let token = info?.resData?.access_token
  return token
}

// 上传签字图片
const uploadFile = (_filePath:any)=>{
uni.uploadFile({
    // 请求接口地址
    url: ApiBaseUrl + '/oss/api/SmartFiles/UpLoadFormXXX', 
    filePath: _filePath,
    name: 'file',
    header: {
          'Authorization': `Bearer ${getToken()}`,
    },
    formData: {
      'bucketName': 'teacher-certification',
      'filePath': 'teacherTraining',
      'fileType': '1'
    },
    success: (uploadFileRes:any) => {

      let result = JSON.parse(uploadFileRes.data)
	  // 下面是图片上传成功之后配合其他接口的操作
      // state.UpLoadData.Sign = result.data.id
      // submitUpload()
    }
  });
}


const submitUpload = async () => {
   // 提交签字
  state.UpLoadData.SubProgramId = state.subTrainingId

  const result: any = await request.post('/teacherCertifiApi/api/ProjectMembersResult/XXX', state.UpLoadData)
}


function refreshMark() {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = String(currentDate.getMonth() + 1).padStart(2, '0')
  const day = String(currentDate.getDate()).padStart(2, '0')
  const hours = String(currentDate.getHours()).padStart(2, '0')
  const minutes = String(currentDate.getMinutes()).padStart(2, '0')
  const seconds = String(currentDate.getSeconds()).padStart(2, '0')

  // markText.value  = [`${year}-${month}-${day}`, `${hours}:${minutes}:${seconds}`]
  markText.value = ['足下科教集团']
}

const signConfirm = () => {
  console.log('点击了确认....')
}

function firstTouchStart() {
  // 在第一次开始触碰时，更新一下时间水印，防止滞留时间太长造成时间误差（非必要）
  refreshMark()
  // 手动调用组件内绘制水印方法重新绘制
  signBoardRef.value.drawMark(markText.value)
}

function reset() {
  refreshMark()
}
</script>

<style lang="scss">
/* 为页面根元素设置背景颜色 
page {
  background-color: #f7f7f8;
}*/
</style>

<style lang="scss" scoped>
.sign-area {
  width: 100%;
  height: calc(100vh - 44px);
}
</style>
```

TeachingNote

vue3 微信小程序，uni-app 签字版插件sp-sign-board。上传图片

{{item.title}}