关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

微信小程序图片选择预览和删除详情方法源码

发布2020-11-13 浏览1641次

详情内容

在调用小程序开发时,调用小程序接口选择图片后发现没有图片预览和删除,很不人性化,HTM资源站长亲自写个微信小程序实现图片选择后的预览和删除某张照片的方法,把源码分享给大家。

看下实现效果图:

image.png

wxml模板源码:

<view class="addImv">
      <!--这个是已经选好的图片-->
      <view wx:for="{{banner}}" wx:key="key" class="upFile" bindtap="showImageBanner" style="border-radius: 5px" data-id="{{index}}">
        <image class="itemImv" src="{{item}}"></image>
        <image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}"></image>
      </view>
 
      <!--这个是选择图片-->
      <view class="chooseView" bindtap="chooseBanner" style="border-radius: 5px" wx:if="{{chooseViewShowBanner}}">
        <image class="chooseImv" src="../../resources/images/add.png"></image>
      </view>
    </view>

样式源码:

/*选择图片View*/
 .addImv {  background-color: white;  /* border: 1px dashed gray; */
  display: flex;  flex-wrap: wrap;  align-items: center;  margin-top: 5rpx;
} 
.upImv {  background-color: white;  width: 100%;  margin-top: 5rpx;
} 
.upImv_text {  font-size: 30rpx;  margin-left: 20rpx;  padding-top: 20rpx;
} 
/*添加图片*/
 .addImv .chooseView { 
width: 180rpx;  height: 180rpx;  
margin: 20rpx 20rpx;  background-color: #f2f6f9; 
border: 1px dashed lightgray;  text-align: center;
line-height: 180rpx;  /* padding: 0rpx 7rpx; */
  border-radius: 5px;  margin-left: 40rpx;
} 
.addImv .chooseImv {  width: 50rpx;  height: 50rpx;
} 
/*已选择的图片*/
.addImv .upFile {  width: 180rpx;  height: 180rpx;
position: relative;  padding: 0rpx 7rpx;
margin-left: 40rpx;  border: 1px solid #c0ccda;
} 
.addImv .upFile .itemImv {  width: 180rpx;  height: 180rpx;  padding: 0rpx 7rpx;
} 
.addImv .upFile .closeImv {  position: absolute;  right: 0rpx;  top: 0rpx;  width: 50rpx;  height: 50rpx;
}

js源码:

Page({ 
  /**
   * 页面的初始数据
   */
  data: {    banner: [], //轮播图片
  }, 
  /** 选择图片Banner */
  chooseBanner: function() {    var that = this;    if (this.data.banner.length < 2) {
      wx.chooseImage({        count: 2, //最多选择2张图片- that.data.banner.length,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function(res) {          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          console.log(res.tempFilePaths);          if (res.tempFilePaths.count == 0) {            return;
          }          //上传图片
          var imgArrNow = that.data.banner;
          imgArrNow = imgArrNow.concat(res.tempFilePaths);
          that.setData({            banner: imgArrNow
          })
          that.chooseViewShowBanner();
        }
      })
    } else {
      wx.showToast({        title: '限制选择6个文件',        icon: 'loading',        duration: 1000
      })
    }
  }, 
  /** 删除图片Banner */
  deleteImvBanner: function(e) {    var banner = this.data.banner;    var itemIndex = e.currentTarget.dataset.id;
    banner.splice(itemIndex, 1);    this.setData({      banner: banner
    })    //判断是否隐藏选择图片
    this.chooseViewShowBanner();
  }, 
 
  /** 是否隐藏图片选择Banner*/
  chooseViewShowBanner: function() {    if (this.data.banner.length >= 2) {      this.setData({        chooseViewShowBanner: false
      })
    } else {      this.setData({        chooseViewShowBanner: true
      })
    }
  }, 
  /** 查看大图Banner */
  showImageBanner: function(e) {    var banner = this.data.banner;    var itemIndex = e.currentTarget.dataset.id;    console.log("itemIndex:" + JSON.stringify(e))
    wx.previewImage({      current: banner[itemIndex], // 当前显示图片的http链接
      urls: banner // 需要预览的图片http链接列表
    })
  },
})


点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载