小程序 上傳圖片（多張、屢次上傳），預覽圖片 刪除圖片

作太小程序的都會碰到一個問題，那就是上傳圖片，單張圖片沒有難度，參照官方文檔就好了。那多張圖片上傳（或者屢次上傳）呢。

個人解決方法涉及了一個概念--遞歸。

直接上代碼， wxml

<!-- 詳情的車輛圖片 -->
<view class='conf-wrap'>
  <view wx:for="{{imgListUrls}}" class='up-img-wrap' wx:key="{{index}}">
    <!-- 圖片 -->
    <image src='{{item}}' class='up-img' mode='aspectFill' bindtap='previewImg' data-id='{{index}}'></image>
    <!-- 刪除按鈕 -->
    <image class="del-img" mode='aspectFill' src="{{delImg}}" bindtap='delImg' data-id='{{index}}'></image>
  </view>
  <!-- 圖片上傳按鈕 -->
  <view class='up-img-wrap' wx:if="{{imgListUrls.length <3}}"><image bindtap='chooseImg' src='../images/seekcar/upload.png' class='up-img' ></image> </view>
  <button class='save-btn' bindtap='uploadImg'> 保存 </button>
</view>

wxss，

.conf-wrap{width:91.7%;margin:50rpx auto;}
.save-btn{width:100%;margin-top:80rpx;background-color:#000;color:#fff;font-size:32rpx;border-radius:0rpx;height:90rpx;line-height:90rpx;}
.up-img-wrap{width:228rpx;height: 188rpx;display: inline-block;text-align: center;position: relative;}
.up-img{width: 188rpx;height: 188rpx;display: inline-block;}
.del-img{position: absolute;top:-15rpx;left: 185rpx;width: 40rpx;height: 40rpx;}

app.js  由於使用了global 變量來儲存數據供別的頁面調用。

如下三個變量都在 globalData 內
    idList: [], // 儲存上傳圖片的id的list
    displayImgList: [], // 儲存上傳圖片url地址的list
    tmpImgList:[],// 上傳圖片時圖片緩存的list

js 

const app = getApp()
Page({
  /**
   * Page initial data
   */
  data: {
    imgListUrls:app.globalData.tmpImgList,
    imgListUrlsCp:[],
    hasImgUpload:false, 
    delImg:'../images/seekcar/del_img.png'
  },

  // 調用相機或者本地相冊獲取圖片
  chooseImg:function(e){
    var that = this
    wx.chooseImage({
      count:(3-that.data.imgListUrls.length),
      sizeType:['original','compressed'],
      success:function(res){
        var newList = app.globalData.tmpImgList
        if (app.globalData.tmpImgList.length > 0) {
          newList = newList.concat(app.globalData.tmpImgList)
        }    
        newList = that.data.imgListUrls.concat(res.tempFilePaths)
        that.setData({
          imgListUrls: newList,
          imgListUrlsCp : newList,
          hasImgUpload:true
        })
        app.globalData.tmpImgList = newList.toString().split(',')
      },
      fail:function(e){
        wx.showToast({
          title: e.errMsg,
          icon: 'none',
          duration: 2000
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      }
    })
  },
  // 上傳圖片到服務器
  uploadImg:function(){
    var that = this
    // 若是有圖片
    if(that.data.imgListUrlsCp.length > 0){
      wx.uploadFile({
        url: app.globalData.urlHead+'/api/v2/upload/orderConfig',
        filePath: that.data.imgListUrlsCp[0],
        name: 'uploadFile',
        formData:{
          token:app.globalData.token
        },
        success:function(res){
          var dataRcv = JSON.parse(res.data)
          // console.log(res)
          if(dataRcv.code == 0){
            // push id 到list中
            app.globalData.idList.push(dataRcv.data.id[0]) 
            // push img url 到 list 中
            app.globalData.displayImgList.push(dataRcv.data.url[0])
            // 去掉數組中第一個值
            that.data.imgListUrlsCp.shift()
            // 檢測是否須要遞歸
            if (that.data.imgListUrlsCp.length > 0) {
              that.uploadImg()
            }else{
              wx.navigateBack({
                delta:1
              })
            }
          }
        }
      })
    }else{
      if(that.data.hasImgUpload == false){
        wx.showToast({
          title: '上傳至少一張圖片',
          icon: 'none',
          duration: 2000
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
        return;
      }
      wx.navigateBack({
        delta:1
      })
    }
  },

  // 預覽圖片
  previewImg:function(e){
    wx.previewImage({
      current: app.globalData.tmpImgList[e.currentTarget.dataset.id],
      urls: app.globalData.tmpImgList,
    })
  },

  // 刪除圖片
  delImg:function(e){
    //獲取數據綁定的data-id的數據
    var currIndex = e.currentTarget.dataset.id
    let images = app.globalData.tmpImgList
    images.splice(currIndex, 1);
    this.setData({
      // imgListUrlsCp: images,
      imgListUrls:images
    })
    app.globalData.tmpImgList = images
    app.globalData.displayImgList = images
    if(app.globalData.tmpImgList.length>0){
      this.setData({
        hasImgUpload:true
      })
    }
  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {
    var that = this
    that.setData({
      imgListUrls: app.globalData.tmpImgList,
      textValue: app.globalData.textArea
    })
    app.globalData.displayImgList = []
  },

})