小程序模板网

ETL:微信小程序之图片上传

发布时间:2018-04-14 15:14 所属栏目:小程序开发教程

目标: 
图片上传 
步骤: 
用户点击身份证正面照,背面照,得到图片,然后将图片进行上传。、 
代码: 
wxml代码截图 
wxml 
js代码截图 
QQ图片20170316120527.png 
QQ图片20170316120638.png 
QQ图片20170316120740.png 
wxml代码

 

				
  1. <loading hidden="{{hidden}}">
  2.  
  3. 上传中...
  4.  
  5. </loading>
  6.  
  7. <view class="merch_img">
  8.  
  9. <view class="indentityCard">
  10.  
  11. <view class="identityCard_front" bindtap="frontimage">
  12.  
  13. <image src="../../pages/images/merch_att_add/tubiao.png" class="images"></image>
  14.  
  15. <view class="imgs">身份证正面</view>
  16.  
  17. <image src="{{FilePaths}}" mode="aspecFill" class="paths" />
  18.  
  19. </view>
  20.  
  21. <view class="identityCard_recite" bindtap="reciteimage">
  22.  
  23. <image src="../../pages/images/merch_att_add/tubiao.png" class="images"></image>
  24.  
  25. <view class="imgs">身份证背面</view>
  26.  
  27. <image src="{{recitePaths}}" mode="aspecFill" class="paths" />
  28.  
  29. </view>
  30.  
  31. </view>
  32.  
  33. <button class="next_step" type="primary" disabled="{{buthidden}}" bindtap="primary">下一步</button>
  34.  
  35. </view>

js代码

 

				
  1. // pages/merch_dredge/merch_img.js
  2.  
  3. var util = require('../../utils/util.js')
  4.  
  5. Page({
  6.  
  7. data: {
  8.  
  9. tempFilePaths: '',
  10.  
  11. hidden: true, //true
  12.  
  13. buthidden: false, //false
  14.  
  15. sourceType: ['album', 'camera']
  16.  
  17. },
  18.  
  19. onLoad: function (options) {
  20.  
  21. try {
  22.  
  23. var res = wx.getSystemInfoSync()
  24.  
  25. var platform = res.platform
  26.  
  27. if (platform == 'ios') {
  28.  
  29. util.msg("警告", "IOS系统暂不支持拍照,请从相册选择照片")
  30.  
  31. this.setData({
  32.  
  33. sourceType: ['album']
  34.  
  35. })
  36.  
  37. }
  38.  
  39. console.log(platform)
  40.  
  41. } catch (e) { }
  42.  
  43. },
  44.  
  45. frontimage: function () {
  46.  
  47. var _this = this;
  48.  
  49. var Type = _this.data.sourceType
  50.  
  51. wx.chooseImage({
  52.  
  53. count: 1, // 默认9
  54.  
  55. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  56.  
  57. sourceType: Type, // 可以指定来源是相册还是相机,默认二者都有
  58.  
  59. success: function (res) {
  60.  
  61. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  62.  
  63. _this.setData({
  64.  
  65. FilePaths: res.tempFilePaths
  66.  
  67. })
  68.  
  69. }
  70.  
  71. })
  72.  
  73. },
  74.  
  75. reciteimage: function () {
  76.  
  77. var _this = this;
  78.  
  79. var Type = _this.data.sourceType
  80.  
  81. wx.chooseImage({
  82.  
  83. count: 1, // 默认9
  84.  
  85. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  86.  
  87. sourceType: Type, // 可以指定来源是相册还是相机,默认二者都有
  88.  
  89. success: function (res) {
  90.  
  91. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  92.  
  93. _this.setData({
  94.  
  95. recitePaths: res.tempFilePaths
  96.  
  97. })
  98.  
  99. }
  100.  
  101. })
  102.  
  103. },
  104.  
  105. primary: function (e)


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23400.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询