微信小程序 實現上傳圖片功能

1、制作一個微信上傳圖片的功能

<!-- index.wxml -->
<view class="con">
    <text class="title">上傳照片</text>

    <view class="img_list">
        <block wx:for="{{imgList}}" wx:key="index">
          <view class="item_img"> 
            <image src="{{item}}" class="img_item" mode="aspectFill" catchtap="previewImg"  data-src="{{item}}" ></image>
            <image src="../../assets/img/close1.png" class="close" catchtap="deleteUpload" data-index="{{index}} "></image>
          </view>
        </block>

        <view class="item_img1 flex-column" catchtap="chooseImg"  wx:if="{{show}}">
          <image src="../../assets/img/good_cart03.png" class="add_img" mode="aspectFill"></image>
          <text>{{imgList.length}}/{{maxPhoto}}</text>
        </view>

    </view>

</view>　

 

index.wxss

.con {
  margin: 0 20rpx;
}

.title {
  padding-left: 31rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}


.img_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24rpx;
}

.item_img {
  width: 220rpx;
  height: 220rpx;
  margin-right: 23rpx;
  margin-bottom: 23rpx;
  position: relative;
  /* border: 1px solid #ccc; */
}

.img_item {
  width: 220rpx;
  height: 220rpx;
}

.item_img:nth-child(3n) {
  margin-right: 0;
}

.item_img1 {
  width: 220rpx;
  height: 220rpx;
  margin-bottom: 23rpx;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item_img1 text {
  font-size: 26rpx;
  /* font-weight: bold; */
  color: #999999;
}

.add_img {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 30rpx;
}

.close {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: -15rpx;
  right: -15rpx;
}

index.js

// pages/photoDoor/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    show: true, //顯示選擇圖片的按鈕
    imgList: [

    ],
    maxPhoto: 10, //最大上傳10張圖片
  },


  onLoad: function (options) {},

  onShow: function () {
    
  },
  /**
   * 選擇上傳方式
   * @param {*} e 
   */
  chooseImg(e) {
    if (this.NextTap) {
      return;
    }
    this.NextTap = true;
    setTimeout(() => {
      this.NextTap = false;
    }, 1500) //1.5秒之后可以再次點擊，防止用戶重復點擊
    wx.showActionSheet({
      itemList: ['從相冊中選擇', '拍照'],
      success: (res) => {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            this.chooseWxImage('album') //相冊
          } else if (res.tapIndex == 1) {
            this.chooseWxImage('camera') //拍照
          }
        }
      }
    })
  },
  /**
   * 上傳照片
   * @param {*} type 
   */
  chooseWxImage: function (type) {
    let {  imgList, maxPhoto } = this.data
    if (imgList.length > 10) {
      wx.showToast({
        title: '最多上傳10張',
        icon: 'none',
        duration: 2000
      })
      return
    }
    wx.chooseImage({

      count: maxPhoto - imgList.length, // 最多可以選擇多少張圖片
      sizeType: ['original', 'compressed'], //所選的圖片的尺寸
      sourceType: [type], //圖片來源
      success: (res) => {
        console.log(res)
        let tempFilePaths = res.tempFilePaths //成功后返回的的路徑
        console.log(tempFilePaths)
        //把圖片對應的路徑都追加到數組中
        tempFilePaths.forEach(item => {
          imgList.push(item)
        })
        this.setData({
          imgList: imgList,
          show: imgList.length >= 10 ? false : true
        })
      }
    })
  },
  /*
   * 圖片預覽
   * @param e
   */
  previewImg(e) {
    let currentUrl = e.currentTarget.dataset.src;
    let urls = this.data.imgList
    wx.previewImage({
      current: currentUrl, // 當前顯示圖片的http鏈接
      urls: urls // 需要預覽的圖片http鏈接列表
    })
  },
  /**
   * 刪除上傳的圖片
   * @param e
   */
  deleteUpload(e) {
    console.log(e)
    let {index} = e.currentTarget.dataset;
 
    let {imgList} = this.data;
    imgList.splice(index, 1)
    this.setData({
      imgList: imgList,
      show: imgList.length >= 10 ? false : true
    })
  }

})

2、效果圖如下: