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

标签：插件 vue randnum res fileName file 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 })     },

 

标签：插件,vue,randnum,res,fileName,file,esign
From： https://www.cnblogs.com/goging/p/17254183.html