微信小程序选择图片控件

本文实例为大家分享了微信小程序选择图片控件的具体代码，供大家参考，具体内容如下

XMl:

loading hidden="{
{
loadingHidden}
}
    ">
     加载中.../loading>
    view class="add_carimg">
     block>
     view class="load_iamge">
     text class="load_head_text">
    上传施工车辆照片/text>
     text class="load_foot_text">
{
{
imgbox.length}
}
    /2/text>
     /view>
     view class='pages'>
     view class="images_box">
 block wx:key="imgbox" wx:for="{
{
imgbox}
}
    ">
      view class='img-box'>
  image class='img' src='{
{
ITem}
}
' data-message="{
{
item}
}
    " bindtap="imgYu">
    /image>
  view class='img-delect' data-deindex='{
{
index}
}
    ' bindtap='imgDelete1'>
      image class='img' src='/pages/images/delete_BTn.png'>
    /image>
      /view>
      /view>
     /block>
 view class='img-box' bindtap='addPic1' wx:if="{
{
imgbox.length2}
}
    ">
      image class='img' src='/pages/images/load_image.png'>
    /image>
     /view>
     /view>
     /view>
     /block>
    /view>
    view>
     button class="work_btn" bindtap="shanggang">
    上岗/button>
    /view>
    

css: 

.work_btn {
     width: 60%;
     height: 35px;
     line-height: 35px;
     margin-top: 15px;
     border-radius: 5px;
     font-Size: 30rpx;
     color: white;
     background-color: rgb(2, 218, 247);
}
 .work_btn:active {
     width: 60%;
     height: 35px;
     line-height: 35px;
     margin-top: 15px;
     border-radius: 5px;
     font-size: 30rpx;
     color: white;
     background-color: rgb(151, 222, 231);
}
 /*********/ .load_iamge {
     width: 100%;
     height: 30px;
     margin-top: 10px;
     display: flex;
     flex-direction: row;
}
 .load_head_text {
     width: 95%;
     height: 20px;
     margin-bottom: 5px;
     margin-top: 5px;
  }
 .load_foot_text {
     width: 5%;
     height: 20px;
     margin-right: 15px;
     margin-top: 5px;
     margin-bottom: 5px;
     float: right;
 }
 .pages {
     width: 98%;
     margin: auto;
     overflow: hidden;
}
 /* 图片 */.images_box {
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
     background-color: white;
}
 .img-box {
     border: 2rpx;
     border-style: solid;
     border-color: rgba(170, 167, 167, 0.452);
     width: 200rpx;
     height: 200rpx;
     margin-left: 35rpx;
     margin-top: 20rpx;
     margin-bottom: 20rpx;
     position: relative;
}
 /* 删除图片 */.img-delect {
     width: 50rpx;
     height: 50rpx;
     border-radius: 50%;
     position: absolute;
     right: -20rpx;
     top: -20rpx;
}
 .img {
     width: 100%;
     height: 100%;
}
    

js:

Page({
  /** * 页面的初始数据 */ data: {
 tempFilePaths: '', imgbox: [], //选择图片 fileIDs: [], //上传云存储后的返回值 src: 0, }
,  onLoad: function (options) {
   }
, //图片点击事件 imgYu: function (event) {
     VAR that = this;
      console.LOG(event.target.dataset.message + "这是啥");
     var src = event.target.dataset.message;
 //图片预览 wx.previewImage({
 current: src, // 当前显示图片的http链接 urls: [src] // 需要预览的图片http链接列表 }
) }
    , // 删除照片 &
    &
 imgDelete1: function (e) {
     let that = this;
     let index = e.currentTarget.dataset.deindex;
     let imgbox = this.data.imgbox;
 imgbox.splice(index, 1) that.setData({
 imgbox: imgbox }
    );
 }
    , // 删除照片 &
    &
 imgDelete1: function (e) {
     let that = this;
     let index = e.currentTarget.dataset.deindex;
     let imgbox = this.data.imgbox;
 imgbox.splice(index, 1) that.setData({
 imgbox: imgbox }
    );
 }
    , // 选择图片 &
    &
    &
 addPic1: function (e) {
     var imgbox = this.data.imgbox;
     console.log(imgbox) var that = this;
     var n = 2;
     if (2 >
     imgbox.length >
 0) {
     n = 2 - imgbox.length;
 }
 else if (imgbox.length == 2) {
     n = 1;
 }
 wx.chooseImage({
 count: n, // 默认9，设置图片张数 sizeTyPE: ['original', 'comPressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) {
      // console.log(res.tempFilePaths)  // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  var tempFilePaths = res.tempFilePaths  console.log('路径' + tempFilePaths);
  if (imgbox.length == 0) {
  imgbox = tempFilePaths  }
     else if (2 >
 imgbox.length) {
      imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
  imgbox: imgbox,  imgnum: imgbox.length  }
    );
 }
 }
) }
,  //图片 imgbox: function (e) {
 this.setData({
 imgbox: e.detail.value }
) }
, }
    )

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序实现图片选择并预览功能
• 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
• 微信小程序图片选择区域裁剪实现方法
• 微信小程序选择图片和放大预览图片功能
• 微信小程序图片选择、上传到服务器、预览（PHP）实现实例
• 微信小程序 chooseImage选择图片或者拍照
• 微信小程序-拍照或选择图片并上传文件

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！