由于項目需要使用asp，因此用asp寫了一個接收微信小程序上傳多張照片的功能，例用的是wx.chooseMedia和wx.uploadFile配合，循環(huán)上傳多張照片，微信小程序現(xiàn)在好像最多可以上傳20張，閑話不好上代碼，需要的可以直接下載，前后臺都有，本文只放前端代碼：

本文實現(xiàn)微信小程序前端上傳多張照片，實現(xiàn)上傳后展示出來，并可以刪除任意照片，點擊照片可以預覽，上下滑動，服務器端用asp接收圖片：


以下是js部份：
data: {
    ImgSrc:[]//存服從服務器返回的圖片地址，如果需要保存數(shù)據(jù)庫，把這個以post形式提交走
  },

  updateHead(e){
      wx.chooseMedia({
      count: 9,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType:['compressed'],
      camera: 'back',
      success: (res) => {
        for(i=0;i<res.length;i++){
          wx.uploadFile({
            url: app.globalData.webapi + `upload.asp?&v=${Math.random()}`,
            filePath: res.tempFiles[i].tempFilePath,
            name: 'file',
            formData: {
              'mobile': '18611436777',
              'weixin' : '18611436777'
            },
            success: (res) => {
              if(res.Code == 200){
                if(obj.ok == 0){
                  this.data.ImgSrc(obj.ImgSrc);
                }else{
                  app.showToast(obj.msg,'error',3000)
                }
              }else{
                app.showToast('upload地址出錯','error',3000)
          })
        }
      }
    })
  },


以下是wxml部份

<view bindtap="updateHead">上傳照片</view>
<view class="ImgSrc">
  <view class="pic" wx:for="{{ImgSrc}}" wx:key="index">
    <image src="{{item}}" data-src="{{item}}" bindtap="previewimage" mode="widthFix"></image>
    <view class="del" data-index="{{index}}" bindtap="del"></view>
  </view>
</view>


完整包下載地址：http://www.fgcxg.com/product/?3.html