微信小程序一次上传多张照片

微信小程序多张图片上传。

先要选择图片,调用微信的chooseimage,选择需要的图片,图片的选择可以加上是否是缩略图。缩略图是压缩后的图片,图片所占的空间不大

将图片的地址存到imagelist中,然后循环上传到服务器。

这是小程序二维码

ChooseImage() {
    wx.chooseImage({
      count: 3, //默认9
      sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album','camera'], //从相册选择
      success: (res) => {
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },
  ViewImage(e) {
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  DelImg(e) {
    wx.showModal({
      title: '提示',
      content: '确定要删除这张照片吗?',
      cancelText: '取消',
      confirmText: '确认',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },
  uploadimg: function (data) {
    wx.showLoading({
      title: '上传中...',
      mask: true,
    })
    var that = this,
      i = data.i ? data.i : 0,
      success = data.success ? data.success : 0,
      fail = data.fail ? data.fail : 0;
    wx.uploadFile({
      url: data.url,
      filePath: data.path[i],
      name: 'file',
      success: function (res) {
        var now = that.data.imageurls
        now = now + res.data + ";"
        that.setData({
          imageurls: now
        })
        console.log(that.data.imageurls);
      },
      complete: () => {
        i++;
        if (i == data.path.length) { //当图片传完时,停止调用 
          var that = this;
          console.log('执行完毕');
          wx.hideLoading();
          wx.request({
            url: app.globalData.requestUrl + '/up_daka_text',
            data: {
              id: that.data.id,
              openid: app.globalData.openid,
              avatarurl: app.globalData.userInfo.avatarUrl,
              nickname: app.globalData.userInfo.nickName,
              text: that.data.textareaBValue,
              image:that.data.imageurls
            },
            method: 'POST',
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            success: (res) => {
              console.log(res.data)
              if (res.data.code == 1) {
                that.setData({
                  daka_success: 1
                })
              } else {
                wx.showToast({
                  title: '打卡失败',
                  icon: 'none'
                })
              }
            }
          })
          console.log('成功:' + success + " 失败:" + fail);
          var myEventDetail = {
            picsList: that.data.detailPics
          } // detail对象,提供给事件监听函数
          var myEventOption = {} // 触发事件的选项
          that.triggerEvent('myevent', myEventDetail, myEventOption) //结果返回调用的页面
        } else { //若图片还没有传完,则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          this.uploadimg(data); //递归,回调自己
        }
      }
    });
  },
发布了71 篇原创文章 · 获赞 291 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/lk888666/article/details/104909488