vue实现移动端签名功能之 vue-esign插件篇

1.安装 vue-esign
npm install vue-esign --save

2.全局引用

 

 3.代码

 

 4.将生成的base64转成文件

 

 

handleGenerate() {

      this.$refs.esign

        .generate()

        .then(res => {

          let randnum = Math.random() * 10000000000000

          randnum = Math.floor(randnum)

          let fileName = 'zhihuiyuanqu/' + randnum + '.png'

          let file = this.dataURLtoFile(res, fileName)

          this.uploadSignImage(file)

        })

        .catch(() => {

          Notify({ type: 'danger', message: '请签名' })

        })

    },

/**

     * 签名图片上传

     */

    uploadSignImage(file) {

      const formData = new FormData()

      formData.append('file', file)

      uploadGrayFile(formData)

        .then(res => {

          if (res.code === 20000) {

            this.fileName = res.data.fileName

            this.params.handlerSignUrl = res.data.fileName

            this.show = false

            this.showImage = true

          }

        })

        .catch(() => {

          this.$vux.loading.hide()

        })

    },

 

 

 

//将base64转换为文件..

    dataURLtoFile(dataurl, filename) {

      var arr = dataurl.split(','),

        mime = arr[0].match(/:(.*?);/)[1],

        bstr = atob(arr[1]),

        n = bstr.length,

        u8arr = new Uint8Array(n)

      while (n--) {

        u8arr[n] = bstr.charCodeAt(n)

      }

      return new File([u8arr], filename, { type: mime })

    },