canvasToTempFilePath生成的图片是临时h5路径可用于临时回显,如果图片的路径要上传接口,需要使用uni.uploadFile来将图片上传到服务器
//我用uniapp做app签名时写的代码片段,上传完服务器之后的路径就可以传到后端给的接口啦,然后在查询的时候就可以通过订单返回的图片路径进行回显
this.$refs.signatureRef.canvasToTempFilePath({
// fileType:'jpg',
success: (res) => {
// 是否为空画板 无签名
console.log(res.isEmpty)
if (res.isEmpty) {
uni.showToast({
title: '无签字内容,请重新签字',
icon: 'none',
duration: 3000
})
return
}
// 生成图片的临时路径
// app | H5 | 微信小程序 生成的是base64
this.url = res.tempFilePath
uni.setStorageSync('url', res.tempFilePath)
let that = this
let name = res.tempFilePath.split('/').pop()
console.log('this.url', this.url)
uni.uploadFile({
url: `${host}/gesup/accessoryUpload`, //仅为示例,非真实的接口地址
filePath: that.url,
fileName: name,
name: 'file',
header: {
"Authorization": getAuthorization()
},
success: (uploadFileRes) => {
console.log('success', uploadFileRes)
if (uploadFileRes.statusCode == 200) {
console.log(11111)
const data = JSON.parse(uploadFileRes.data)
// that.model.pics = data.data.accessPath
console.log('data.data.accessPath', data.data.accessPath)
that.model.pics.push(data.data.accessPath)
this.setSignOut()
}
},
fail: (res) => {
console.log('err', res);
}
});
}
})