小程序上传图片及预览图片

原创 黄良钵  2018-02-13 22:05  阅读 260 次 评论 0 条

小程序上传图片及预览图片

wxml代码:

  1. <!-- 图片 -->
  2.     <view class='upImgTips' wx:if="{{previewImage != ''}}">点击预览图片,长按删除图片</view>
  3.     <view class='img'>
  4.       <view class='img_li' bindtap='upload_img'>
  5.         <text class='iconfont icon-zhaoxiangji'></text>
  6.       </view>
  7.       <view class='img_li' wx:for="{{previewImage}}" wx:key="{{index}}">
  8.         <image bindtap='previewImage' bindlongpress='delImage' data-index="{{index}}" data-src='{{item}}' src='{{item}}' mode='widthFix'></image>
  9.       </view>
  10.     </view>

 

wxss代码:

  1. .img {
  2.   width: 100%;
  3.   display: flex;
  4.   flex-wrap: wrap;
  5. }
  6. .img_li {
  7.   width: calc((100vw - 50px) / 4);
  8.   height: calc((100vw - 50px) / 4);
  9.   border1px dashed #4da585;
  10.   margin-right10px;
  11.   margin-bottom10px;
  12.   text-aligncenter;
  13.   line-height: calc((100vw - 50px) / 4);
  14.   border-radius: 5px;
  15.   overflowhidden;
  16. }
  17. .img_li:nth-child(4n) {
  18.   margin-right: 0;
  19. }
  20. .img_li image {
  21.   width: 100%;
  22. }
  23. .recorder {
  24.   margin10px 0;
  25. }
  26. .upImgTips {
  27.   font-size: 25rpx;
  28.   margin-bottom10px;
  29. }

 

js代码:

  1. data: {
  2.    previewImage:[], // 预览图片地址
  3.  },
  4.  // 上传图片
  5.  upload_img:function(){
  6.    let that = this;
  7.    wx.chooseImage({
  8.      // count: 1, //最多可以选择的图片张数,默认9
  9.      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  10.      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  11.      success: function (res) {
  12.        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  13.        var tempFilePaths = res.tempFilePaths
  14.        let previewImage = that.data.previewImage;
  15.        // console.log(res)
  16.        for (let i = 0; i < res.tempFilePaths.length;i++){
  17.            previewImage.push(tempFilePaths[i]);
  18.        }
  19.        // console.log(previewImage)
  20.        that.setData({
  21.          previewImage: previewImage
  22.        })
  23.      }
  24.    })
  25.  },
  26.  // 预览图片
  27.  previewImage:function(e){
  28.    wx.previewImage({
  29.      current: ''// 当前显示图片的http链接
  30.      urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表
  31.    })
  32.  },
  33.  // 长按删除图片
  34.  delImage:function(e){
  35.    // console.log(e.currentTarget.dataset.index)
  36.    let _index = e.currentTarget.dataset.index;
  37.    let previewImage = this.data.previewImage;
  38.    console.log(previewImage)
  39.    previewImage.splice(_index,1);
  40.    this.setData({
  41.      previewImage: previewImage
  42.    })
  43.  },
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情