小程序模板网

微信小程序之多图上传

发布时间:2021-06-28 11:10 所属栏目:小程序开发教程

小程序的upLoadFile一次只能上传一张图片,需要循环调这个接口来实现多图上传,以下是示例代码,也可以直接封装成组件调用
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)
                              })
                         }
                    })       
               }
          }
     })
},


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26779.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询