小程序-----上传图片

page {
  background: #f3f3f3;
  height: 100%;
}
.tos{
  height: 100vh;

}
.upload {
  width: 100%;
  /* height: 320rpx; */
  background: rgb(255, 255, 255);
  margin-bottom: 10rpx;
}

.flex {
  display: flex;
}
.nos{
  overflow: hidden;
  height: 1000rpx;
}
.up-pic {
  /* padding:20rpx 24rpx; */
  width: 100%;
  justify-content: center;
}
/* .ap-box{
  float: left;
} */

.pic-box {
  padding-top: 26rpx;
  flex-flow: wrap;
  width: 710rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.ap-box {
  position: relative;
  margin-bottom: 10rpx;
}

.add-pics {
  width: 360rpx;
  height: 190rpx;
  /* margin-right: 20rpx; */
  margin: 0 auto;
  position: relative;
  text-align: center;
  border: 1rpx dashed rgb(153, 153, 153);
  /* margin-top: 30rpx;
  margin-bottom: 40rpx; */
}

.add-pic {
  width: 230rpx;
  height: 180rpx;
  /* margin-right: 20rpx; */
  position: relative;
  /* margin: 20rpx 30rpx 20rpx 30rpx; */
}

.img {
  width: 44rpx;
  height: 44rpx;
}

.imgs {
  width: 100rpx;
  height: 83rpx;
  margin-top: 30rpx;
}

.p-v {
  font-size: 28rpx;
  color: rgb(51, 51, 51);
  margin-top: 10rpx;
  /* padding-bottom: 30rpx; */
}

/* 删除图片 */

.img-de {
  width: 45rpx;
  height: 45rpx;
  border-radius: 50%;
  position: absolute;
  right: 6rpx;
  top: 6rpx;
}

.hong-contant .teamwork-btn {
  width: 360rpx;
  height: 88rpx;
  border-radius: 50rpx;
  color: white;
  background-color: #14a1fd;
  margin: 0 auto;
  margin-top: 80rpx;
  margin-bottom: 40rpx;
}

 

<view class='upload'>
    <!-- 选择图片 -->
    <view class='up-pic'>
      <view class='flex pic-box'>
        <block wx:key="imgbox" wx:for="{{images}}">
          <view class='ap-box'>
            <view class='add-pic'>
              <image class='add-pic' src="{{url+'/'+item}}" mode='aspectFit'></image>
              <view class='img-de' data-deindex='{{index}}' bindtap='imgDelete1'>
                <image class='img' src='../../images/delate.png'></image>
                <!-- //右上角的删除按钮图片 -->
              </view>
            </view>
          </view>
        </block>
      </view>
      <view style='padding-top:40rpx;padding-bottom:40rpx;'>
        <view class='add-pics' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
          <image class='imgs' src='../../images/pictures.png'></image>
          <view class='p-v'>点击上传照片</view>
          <!-- //+号图片 -->
        </view>
      </view>
    </view>
  </view>

// pages/release/release.js


var app = getApp();
var eapi = getApp().url;
var images = []
Page({



  /**
   * 页面的初始数据
   */
  data: {
    imgbox: [], //上传图片,   
  },
  // 删除照片 &&
  imgDelete1: function(e) {
    console.log(1);
    let that = this;
    let index = e.currentTarget.dataset.deindex;
    let imgbox = this.data.images;
    console.log(index);
    // console.log(imgbox);
    imgbox.splice(index, 1)
    // console.log(imgbox);
    images = imgbox;
    that.setData({
      images: imgbox
    });
  },
  addPic1: function(e) {
    if (images.length>=3){
      console.log('限制上传3张图片')
      return false
    }
    var imgbox = this.data.imgbox;
    console.log(imgbox)
    var picid = e.currentTarget.dataset.pic;
    console.log(picid)
    var that = this;
    var n = 3;
    if (3 > imgbox.length > 0) {
      n = 3 - imgbox.length;
    } else if (imgbox.length == 3) {
      n = 1;
    }
    wx.chooseImage({
      count: n, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // console.log(res.tempFilePaths)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图
        console.log(res)
        for (var i = 0; i < res.tempFilePaths.length; i++) {
          console.log(i)
          wx.uploadFile({
            header: {
              'Content-Type': 'application/json'
            },
            url: "http://192.168.3.182" + '/v1/api/img',
            filePath: res.tempFilePaths[i],
            name: 'img',
            formData: {
              'img': res.tempFilePaths[i],
              // id: id
            },
            success: function(res) {
              console.log(res)
              that.setData({
                img: JSON.parse(res.data).data
              })
              images.push(JSON.parse(res.data).data)
              // console.warn('数组图片');
              console.log(images)
              that.setData({
                images: images
              })
              var data = res.data



              that.onLoad()
            },
            fail: function(rs) {
              console.log(res)
            }
          })
        }



      }



    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {



  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {



  },



  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {



  },



  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {



  },



  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {



  },



  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {



  },



  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {



  },



  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {



  }
})