合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

150 lines
3.3 KiB

  1. <template>
  2. <view class="idCard-box">
  3. <view class="positive">
  4. <image :src="upLoadPositiveImg == ''?positiveImg:upLoadPositiveImg" @tap.prevent="uploadPositive">
  5. </image>
  6. </view>
  7. <view class="reverse">
  8. <image :src="upLoadReverseImg == ''?reverseImg:upLoadReverseImg" @tap.prevent="uploadReverse">
  9. </image>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. // 正面身份证
  18. positiveImg: '',//自己图片路径
  19. upLoadPositiveImg: '',
  20. // 反面身份证
  21. reverseImg: '', //自己图片路径
  22. upLoadReverseImg: '',
  23. baidu_token:' '//百度token
  24. }
  25. },
  26. onLoad() {
  27. // this.getACSS_TOKEN()
  28. },
  29. methods: {
  30. // file文件转base64
  31. getImageBase64(blob) {
  32. return new Promise((resolve, reject) => {
  33. const reader = new FileReader();
  34. reader.readAsDataURL(blob);
  35. reader.onload = () => {
  36. const base64 = reader.result;
  37. resolve(base64);
  38. }
  39. reader.onerror = error => reject(error);
  40. });
  41. },
  42. // 身份证正面上传
  43. uploadPositive() {
  44. uni.chooseImage({
  45. count: 1,
  46. sizeType: ['original', 'compressed'],
  47. sourceType: ['album', 'camera'],
  48. success: (res) => {
  49. this.upLoadPositiveImg = res.tempFilePaths[0]
  50. this.getImageBase64(res.tempFiles[0]).then(res => {
  51. this.uploadIdentify(res)
  52. })
  53. }
  54. })
  55. },
  56. // 身份证反面上传
  57. uploadReverse() {
  58. uni.chooseImage({
  59. count: 1,
  60. sizeType: ['original', 'compressed'],
  61. sourceType: ['album', 'camera'],
  62. success: (res) => {
  63. this.upLoadReverseImg = res.tempFilePaths[0]
  64. this.getImageBase64(res.tempFiles[0]).then(res => {
  65. this.uploadIdentify(res)
  66. })
  67. }
  68. })
  69. },
  70. // 获取百度token
  71. getACSS_TOKEN() {
  72. let that = this
  73. uni.request({
  74. // url: '/baiduApi/oauth/2.0/token',
  75. url: 'https://aip.baidubce.com/oauth/2.0/token',
  76. method: 'POST',
  77. data: {
  78. grant_type: 'client_credentials',
  79. client_id: '你的',
  80. client_secret: '你的',
  81. },
  82. header: {
  83. 'Content-Type': 'application/x-www-form-urlencoded'
  84. },
  85. success: res => {
  86. this.baidu_token = res.data.access_token
  87. }
  88. });
  89. },
  90. // 上传识别
  91. uploadIdentify(res) {
  92. uni.request({
  93. url: '/baiduApi/rest/2.0/ocr/v1/idcard?access_token=' + this.baidu_token,
  94. method: 'POST',
  95. data: {
  96. image: res,
  97. id_card_side: 'back' // 身份证 正反面 front:身份证含照片的一面 back:身份证带国徽的一面
  98. },
  99. header: {
  100. 'Content-Type': 'application/x-www-form-urlencoded'
  101. },
  102. success: res => {
  103. console.log(res.data)
  104. }
  105. })
  106. },
  107. }
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. .idCard-box {
  112. margin-top: 100px;
  113. width: 100%;
  114. height: 100%;
  115. display: flex;
  116. flex-direction: row;
  117. background-color: #fff;
  118. .positive {
  119. flex: 1;
  120. height: 30%;
  121. width: 30%;
  122. display: flex;
  123. align-items: center;
  124. justify-content: center;
  125. background-color: red;
  126. image {
  127. width: 80%;
  128. height: 100%;
  129. }
  130. }
  131. .reverse {
  132. flex: 1;
  133. height: 30%;
  134. width: 30%;
  135. display: flex;
  136. align-items: center;
  137. justify-content: center;
  138. background-color: blue;
  139. image {
  140. width: 80%;
  141. height: 100%;
  142. }
  143. }
  144. }
  145. </style>