1. 程式人生 > 實用技巧 >小程式多圖上傳

小程式多圖上傳

wxml

     <view class="images" bindtap="upload">
          <image src="../../images/icon_shangchuan.png"></image>
          <text>新增圖片</text>
     </view>

wxss

.images{
     width: 134rpx;
     height: 134rpx;
     border:1px dashed #D8D8D8;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
.container .images image{
     width: 60rpx;
     height: 60rpx;
}

  

wx.js

upload: function (e) {
     var that = this;
     // 上傳圖片的提示
     if (that.data.uploaderNum >= 10) return wx.showToast({
          title: "最多隻能上傳" + '10' + "張圖",
          duration: 2500,
          icon: "none"
     }), !1;
     //選擇圖片
     wx.chooseImage({
          count: 10 - that.data.uploaderNum, // 預設10
          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
               })
               for (var i = 0; i < uploaderList.length; i++) {
                    wx.uploadFile({
                         url: getApp().globalData.url+'/api/upload/upload',
                         filePath: uploaderList[i],
                         name: 'file',
                         // 需要傳的引數
                         formData: {
                              'user': 'test'
                         },
                         success: function (res) {
                              that.setData({
                                   tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path) 
                              })
                         }
                    })        
               }
          }
     })
},