uniapp 手写签名上传服务器

用的框架是yinghuo,上传用了封装的上传

<template>
    <view class="container">
        <jp-signature ref="signatureRef" :openSmooth="true"></jp-signature>
        
        <view class="dis-flex m-top20">
            <u-button type="error" size="medium" @click="clear">清空</u-button>
            <u-button type="warning" size="medium" @click="undo">撤消</u-button>
            <u-button type="success" size="medium" @click="save">保存</u-button>
        </view>
        
        <!-- <image :src="url" mode="" class="sign-img m-top20"></image> -->
    </view>
</template>

<script>
  import * as UploadApi from '@/api/upload'
    export default {
        data() {
            return {
                url: '',
                isload: false;
            }
        },
        methods: {
            save() {
                let that = this
                this.$refs.signatureRef.canvasToTempFilePath({
                    success: (res) => {
                        console.log(res)
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        if(res.isEmpty){
                            uni.showToast({
                                icon:'none',
                                title:'请先签名'
                            })
                            return
                        }
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        // console.log("base64",res.tempFilePath)
                        this.url = res.tempFilePath
                        this.upload()
                    }                    
                })
            },
            clear() {
                this.$refs.signatureRef.clear()
            },
            undo() {
                this.$refs.signatureRef.undo()
            },
            upload(){
                let that = this
                let file = that.base64ToFile(that.url, 'signimg.png')
                
                UploadApi.image([file])
                  .then(fileIds => {
                        console.log('上传结果',fileIds)
                    // resolve(fileIds)
                  })
                  .catch(reject=>{
                        console.log('上传失败',reject)
                    })
            },
            // base64转文件
            base64ToFile(base64Data, filename) {
              // 将base64的数据部分提取出来
              const parts = base64Data.split(';base64,');
              const contentType = parts[0].split(':')[1];
              const raw = atob(parts[1]);
                
              
              // 将原始数据转换为Uint8Array
              const rawLength = raw.length;
              const uInt8Array = new Uint8Array(rawLength);
              for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
              }
              
              // 使用Blob和Uint8Array创建File对象
              const blob = new Blob([uInt8Array], {type: contentType});
                const path = URL.createObjectURL(blob);
              const file = new File([blob], filename, {type: contentType});
                Object.defineProperty(file,'path',{
                    get() {
                        return base64Data
                    }
                })
                
                return file
            },
            // 
            // base64ToFile2(base64String, fileName) {
            //   const byteString = atob(base64String.split(',')[1]);
            //   const mimeString = base64String.split(',')[0].split(':')[1].split(';')[0];
            //   const ab = new ArrayBuffer(byteString.length);
            //   const ia = new Uint8Array(ab);
            //   for (let i = 0; i < byteString.length; i++) {
            //     ia[i] = byteString.charCodeAt(i);
            //   }
            //   const blob = new Blob([ab], { type: mimeString });
            //   const file = new File([blob], fileName, { type: mimeString });
            //   // file.path = URL.createObjectURL(blob);
            //     file.path = this.url;
                
            //   return file;
            // },
            
        }
    }
</script>

<style scoped>
    .container,.sign-img{
        width: 100%;
        height: 400rpx;
        border: 1px solid gainsboro;
        box-sizing: border-box;
    }
</style>

如果用的uni本身的上传,可以自行研究一下,也比较简单