小さいプログラムはピクチャーをアップロードして(何枚、何度もアップロードします)、ピクチャーをプレビューしてピクチャーを削除します

小さなプログラムをしたことがある人はみな問題に直面します.それは画像をアップロードすることです.1枚の画像は難しくありません.公式ドキュメントを参照すればいいです.その写真は何枚もアップロード(または何度もアップロード)されていますね.
私の解決策は一つの概念--再帰に関連している.
直接コード、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 = []
  },

})

 
転載先:https://www.cnblogs.com/ming-os9/p/10869782.html