小程序图片选择模块

wxml

    发布任务


  类型
  说明：
  内容：
  添加图片
  
      
      
        
        
      
 
      
      
        
      
    





 

wxss:

.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: [], //轮播图片
  chooseViewShowBanner:true,
  },

/** 选择图片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链接列表
})
},
})