小程序上傳多張圖片

一：textarea組件層級過高導致文字穿透浮層問題。

項目需求：最近做的一個小程序需求，其中一個頁面使用到了 textarea 這個小程序組件，然后點擊頁面上的某個元素，會觸發頁面彈起一個彈窗，這時發現 textarea 的 placeholder文字或者輸入的文字內容，會直接穿透遮罩層和浮動彈窗，顯示在最上面。第一反應以為是層疊級問題。所以瘋狂給彈框的 z-index 屬性往上加。但無濟於事。於是改變思路：

利用 wx:if 當顯示彈框的時候，把 textarea 隱藏；彈框關閉的時候，顯示textarea。（這個方法比較暴力直接，治標不治本，若有更好的解決方案可以告知）。

二：上傳多張圖片

項目需求：用戶最多可以上傳6張圖片，如果上傳錯誤可以單張刪除，上傳成功可以預覽照片。效果圖如下：

首先在微信公眾平台配置好uploadFile合法域名。

界面的WXML代碼大致如下所示：

<view class="upload-view">
<view class='upload'>
    <!-- 根據已選擇的圖片臨時路徑數組展示圖片-->
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
        <!-- 刪除-->
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <!-- 圖片-->
        <image class="special-image" bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上傳按鈕+框 -->
    <view class="image" wx:if="{{showUpload}}">
     <image  bindtap='upload' src="/images/timg.png" ></image>
    </view>
</view>
</view>

與此對應的js代碼如下：

Page({
  data: {
    id:'',                               //上傳時后端返回的圖片ID,拼接后存入
    joinString:'',                    
    uploaderList: [],              //保存上傳圖片url的數組
    uploaderNum: 0,             //已經上傳的圖片數目
    showUpload: true,           //控制上傳框的顯隱
  },
//上傳圖片
  upload: function (e) {
    var that = this;
//選擇圖片
    wx.chooseImage({
      count: 6 - that.data.uploaderNum, // 默認6
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        that.data.uploaderList.concat(res.tempFilePaths);
        var uploaderList = res.tempFilePaths;
        that.setData({
          uploaderList: that.data.uploaderList.concat(res.tempFilePaths),
        })
        that.setData({
          uploaderNum: that.data.uploaderList.length
        })

        if (uploaderList.length == 6) {
          that.setData({
            showUpload:false
          })
          console.log(that.showUpload)
        }
        for (var i = 0; i < uploaderList.length; i++) {
          wx.uploadFile({
            url: 'xxxxx',
            filePath: uploaderList[i],
            name: 'files',
            formData: {
              files: uploaderList,
            },
            success: function (res) {
               var id = JSON.parse(res.data).data.attId
                that.setData({
                id: that.data.id + `${id},`,
                joinString: (that.data.id + `${id},`).slice(0, -1)
              })
            }
          })
        }
      }
    })
  },
})

刪除圖片、展示圖片邏輯如下：

 //展示圖片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
  },
 // 刪除圖片
  clearImg: function (e) {
    var that = this
    var nowList = [];//新數據
    var uploaderList = that.data.uploaderList;//原數據
    
    for (let i = 0; i < uploaderList.length; i++) {
      if (i == e.currentTarget.dataset.index) {
        var arr = that.data.joinString.split(',')
            arr.splice(i, 1);                              //刪除圖片的同時刪除掉其對應的ID
            var newArr = arr.join(',')
            that.setData({
              joinString:newArr,
              id:newArr+','
            })
           } else {
        nowList.push(uploaderList[i])
      }
    }
    this.setData({
      uploaderNum: this.data.uploaderNum - 1,
      uploaderList: nowList,
      showUpload: true,
    })
   },

之后就是隨着表單信息把圖片ID一塊提交了，注意：在提交完成之后記得將data中的uploadList、uploadNum、Id、joinString清空哦！否則再次提交表單的時候會出現上傳圖片的bug哦！