小程序模板網(wǎng)

微信小程序之多圖上傳

發(fā)布時(shí)間：2021-06-28 11:10 所屬欄目：小程序開發(fā)教程

小程序的upLoadFile一次只能上傳一張圖片，需要循環(huán)調(diào)這個(gè)接口來實(shí)現(xiàn)多圖上傳，以下是示例代碼，也可以直接封裝成組件調(diào)用
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, // 默認(rèn)10
          sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
          sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
          success: function (res) {
               // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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',
                         // 需要傳的參數(shù)
                         formData: {
                              'user': 'test'
                         },
                         success: function (res) {
                              that.setData({
                                   tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path)
                              })
                         }
                    })       
               }
          }
     })
},


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/26779.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢