微信小程序上传多张图片

最新推荐文章于 2024-03-24 13:58:25 发布

abcdefghijk12345636

最新推荐文章于 2024-03-24 13:58:25 发布

阅读量188

点赞数

分类专栏： 123

本文链接：https://blog.youkuaiyun.com/hujgg/article/details/118305419

版权

123 专栏收录该内容

38 篇文章

订阅专栏

    <view class="xinpanbaobei_content_lists_text" >带看图片 <span>*</span> </view>
 <view class="xinpanbaobei_content_lists">

    <view class='ui_uploader_cell' >
    <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 bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>
    </view>

     // data中数据图片的本地路径
     isImage:'',
     // 上传图片的内容
     InputVal:'',
     uploaderList: [],
     uploaderNum:0,
     showUpload:true,
     ImgList:''

        //点击发起请求

for(var i=0;i<this.data.uploaderList.length;i++){
          wx.uploadFile({
            url: url.baseUrl+'/wx/busTakeLook/upload',
            filePath: this.data.uploaderList[i],
            name: 'file',
            header: {
              'cookie':wx.getStorageSync('cookies')
            },
            formData:{
              ProjectRegisterID:this.data.ProjectID
            },
            success:(res)=>{
              setTimeout(() => {
                // 获取压缩后的图片路径
                console.log(this.data.compressFiles)
            }, 300)
              num++
              a+=res.data+","
              if(num == this.data.uploaderList.length){
                this.setData({
                  Boolean:false
                })
                request({ 
                  url: "/wx/busTakeLook/AddUserTakeLook",
                  method: 'POST', 
                  data:{
                  InqName:this.data.InqName,
                  InqTel:this.data.InqTel,
                  ReportRemarks:this.data.ReportRemarks,
                  ProjectID:this.data.ProjectID,
                  TakeLookImg1:a
                }
              })
                .then(res => {
                  this.setData({
                    Boolean:true
                  })
                if(res.data.code==200){
                  wx.showToast({
                    title: res.data.msg,
                    icon:'none',
                    duration:2500
                  })
                  setTimeout(()=>{
                    wx.navigateTo({
                      url: '/UserPage/pages/MyCustomer/MyCustomer',
                    })
                  },1000)
                  this.setData({
                    InqName:"",
                    InqTel1:"",
                    ReportRemarks:"",
                    uploaderList:''

                  })
                }
                else{
                  wx.showToast({
                    title: res.data.msg,
                    icon:'none',
                    duration:2500
                  })
                  
                }
                  console.log(res);
                  // this.setData({
                  //   getDitchInfo: a
                  // })
                }
                
                )
              }
            },
            fail:(err)=>{
              console.log(err,6);
            }
          })
      }


//查看图片
showImg:function(e){
  var that=this;
  wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
  })
},

    // 删除图片
    clearImg:function(e){
      var nowList = [];//新数据
      var uploaderList = this.data.uploaderList;//原数据
      
      for (let i = 0; i < uploaderList.length;i++){
          if (i == e.currentTarget.dataset.index){
              continue;
          }else{
              nowList.push(uploaderList[i])
          }
      }
      this.setData({
          uploaderNum: this.data.uploaderNum - 1,
          uploaderList: nowList,
          showUpload: true
      })
  },
      //上传图片
      upload: function(e) {
        var that = this;
        wx.chooseImage({
            count: 9 - that.data.uploaderNum, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                console.log(res)
                // console.log(res.tempFiles[0].size/1024)
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                if (uploaderList.length==9){
                    that.setData({
                        showUpload:false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    files:uploaderList,
                    uploaderNum: uploaderList.length,
                })
               
            }
        })
    },