uni.uploadFile和this.$refs.signatureRef.canvasToTempFilePath
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); } }); } })
本文来自博客园,作者:prince11,转载请注明原文链接:https://www.cnblogs.com/prince11/p/17806140.html