微信小程序 从本地相册选择图片或使用相机拍照chooseImage()和预览图片previewIma - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序 从本地相册选择图片或使用相机拍照chooseImage()和预览图片previewIma

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:52

要实现的效果如图所示

wxml:

  1. <view class='suggest_img'>请提供相关问题的截图或照片</view>
  2. <view class='img_box'>
  3. <block wx:for="{{add_img}}" wx:key="{{index}}">
  4. <view class='have_img'>
  5. <image src='{{item}}' class='sug_picture' data-num="{{index}}" catchtap='preview_img'></image>
  6. <image src='../../images/delete_img.png' style='width:40rpx;height:40rpx;' data-num="{{index}}" class='delete_img' catchtap='delete_th'></image>
  7. </view>
  8. </block>
  9. <view class='no_img' bindtap="gotoShow">
  10. <image src='../../images/no_img.png'></image>
  11. <view>上传图片</view>
  12. </view>
  13. </view>

js:

  1. data: {
  2.   add_img:[]
  3. },
  4. gotoShow:function(){
  5. var that=this;
  6. wx.chooseImage({
  7. success: function(res) {
  8. // console.log(res.tempFilePaths)
  9. var src = res.tempFilePaths;
  10. var aa=that.data.add_img.concat(src)
  11. // console.log(aa)
  12. that.setData({
  13. add_img:aa
  14. })
  15. },
  16. })
  17. },
  18. delete_th:function(e){
  19. var num=e.currentTarget.dataset.num;
  20. var that=this;
  21. wx.showModal({
  22. title: '提示',
  23. content: '确定要删除吗?',
  24. success: function (res) {
  25. if (res.confirm) {
  26. that.data.add_img.splice(num,1)
  27. that.setData({
  28. add_img:that.data.add_img
  29. })
  30. } else if (res.cancel) {
  31. console.log('用户点击取消')
  32. }
  33. }
  34. })
  35. },
  36. preview_img:function(e){
  37. var cur_num=e.currentTarget.dataset.num;
  38. var img_list=this.data.add_img
  39. wx.previewImage({
  40. current:img_list[cur_num],
  41. urls: this.data.add_img
  42. })
  43. },

相关案例查看更多