小程序上传图片

直接上代码 删除没有优化 

wxml

<view class="container">
  <view class="main">
    <view class="title">上传图片</view>
    <!-- 点击上传前的页面 -->
    <view class="content"  bindtap="handleUploadImg">
      <text class="plus">+</text>
    </view>
    <!-- 点击上传后的页面 -->
    <view class="selectImg" wx:if="{{imgPreview}}">
      <view class="box" wx:for="{{imgPreview}}">
        <view class="deleteBox" bindtap="deleteImg" data-item="{{item}}">
          <view class="deleteBtn">x</view>
        </view>
        <image class="img" src="{{item}}" bindtap="previewImg" data-item="{{item}}" />
      </view>

    </view>
  </view>
</view>

wxss

.container {
  width: 100%;
}
.main {
  display: flex;
  padding: 0 16px;
  flex-direction: column;
  background-color: #fff;
}
.title {
  margin: 16px;
}
.content {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px;
  background-color: #eee;
  border: 1px dashed #ddd;
  border-radius: 4px;
}
.selectImg {
  position: relative;
}
.selectImg .img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  object-fit: contain;
  margin: 16px;
}
.deleteBox {
  position: absolute;
  top: 20px;
  left: 74px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background-color: #a59f99;
}
.deleteBtn {
  color: #fff;
}

 js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 11123213123,
    imgPreview: [],
    count: 3
  },
  handleUploadImg: function () {
    const that = this
    switch (this.data.imgPreview.length) {
      case 0:
        this.data.count = 3
        break
      case 1:
        this.data.count = 2
        break
      case 2:
        this.data.count = 1
        break
    }
    if (this.data.imgPreview.length != 3) {
      console.log(1)
      // 从相册或相机拍摄
      wx.chooseImage({
        count: that.data.count, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //可以指定是相册还是拍照 默认两者都有
        success: (res) => {
          console.log('res: ', res);
          const previewData = res.tempFilePaths //得到选择图片的网络地址 http://127.0.0.1:3000/.....IMG917.jpeg
          for (let i = 0; i < previewData.length; i++) {
            that.data.imgPreview.push(previewData[i])
          }
          that.setData({
            imgPreview: that.data.imgPreview
          })
        }
      });
    } else {
      wx.showToast({
        title: '最多只能选三张图片',
        icon: 'none',
        duration:  2000
      })
    }

  },
  // 预览图片
  previewImg: function (e) {
    let url = e.currentTarget.dataset.item
    wx.previewImage({
      urls: url, // 图片地址列表
      current: 1, //默认显示的图片的地址
      success: (res) => {
        console.log('预览调用成功');
      },
      fail: (res) => {
        console.log('预览调用失败');
      }
    });
  },
  // 删除选中的图片
  deleteImg: function (e) {
    console.log(e)
    let arr = []
    for (let i = 0; i < this.data.imgPreview.length; i++) {
      if (e.currentTarget.dataset.item != this.data.imgPreview[i]) {
        arr.push(this.data.imgPreview[i])
      }
    }
    this.setData({
      imgPreview: arr
    })
  },

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

  }
})