微信小程序 上传图的功能

首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令

微信小程序  上传图的功能 

js代码:

  //选择图片
  uploadImgAdd: function(e) {
    var imgs = this.data.imgs;
    console.log(imgs)
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res)
        let tempFilePaths = res.tempFilePaths;
        let imgs = this.data.imgs;
        console.log('imgs')
        console.log(imgs)
        //上传的图片
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            return false;
          } else {
            imgs.push(tempFilePaths[i])
          }
        }
        //上传的图片放到页面上
        this.setData({
          imgs: imgs
        })
      }
    })
  },

  /**
   * 获取上传图片地址
   */
  //单击发布上传图片和内容
  bindFormSubmit: function(e) {
    var imgArr = this.data.imgs;
    this.addPic(e, imgArr)
  },
  addPic: function(e, imgArr) {
    console.log("imgArr")
    console.log(imgArr)
   
    let uploadimagsSrc = this.data.uploadimagsSrc;
    console.log("uploadimagsSrc")
    console.log(uploadimagsSrc)
    for (let i in imgArr) {
      wx.uploadFile({
        url: app.data.urls + 'images/Picture',
        filePath: imgArr[i],
        header: {
          'content-type': 'multipart/form-data'
        },
        name: 'file',
        success: res => {
          console.log(res)
          let data = res.data;
          console.log(data)
          console.log([...uploadimagsSrc, data])
          uploadimagsSrc = [...uploadimagsSrc, data];
          console.log(uploadimagsSrc)
          this.setData({
            uploadimagsSrc: uploadimagsSrc
          })
        },
      })
    }
    
    let timer = setInterval(() => {
      //间歇调用
      if (uploadimagsSrc.length == imgArr.length) {
        console.log(uploadimagsSrc)
        console.log(imgArr)
        debugger
        this.sendMessageInfo(e, uploadimagsSrc);
        clearInterval(timer); //可取消由 setInterval() 函数设定的定时执行操作
      }
    }, 500)
  },
  sendMessageInfo: function(e, imagsSrc) {
    var formData = e.detail.value.message
    if (formData.length == 0) {
      wx.showToast({
        title: '意见反馈内容不能为空,说几句话吧~',
        icon: 'none',
        duration: 1500
      })
      return false;
    }
    var replaceLeftRig = formData.replace(/(^\s*)|(\s*$)/g, "").length
    if (replaceLeftRig < 15) {
      wx.showToast({
        title: '意见反馈内容不能少于15个字',
        icon: 'none',
        duration: 1500
      })
      return false;
    }
    imagsSrc = imagsSrc.join(';')
    wx.request({
      url: app.data.urls + 'feedback/insertCustomerFeedback',
      data: {
        "customerId": app.data.customerId,
        "feedbackMessages": formData,
        "imagesAddress": imagsSrc,
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res)
        /**
         * 
         * 异常判断
         * 
         * 
         */
        if (res.data.status == 200) {
          wx.showModal({
            content: '谢谢您提交的反馈,后台的小哥哥会第一时间收到哦~',
            showCancel: false,
            confirmText: "知道了",
            success: function(res) {
              if (res.confirm) {
                wx.navigateBack({
                  delta: 1
                })
              }
            }
          });
        } else {
          wx.showModal({
            content: '系统繁忙',
            showCancel: false,
            confirmText: "知道了",
            success: res => {
              console.log(res)
            }
          });
        }


      }
    })
  },

  //删除图片
  uploadImgClose: function(e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
    // console.log(imgs)
  },


feedBack/feedBack

 

上一篇:基于leftlet的经历地图相册


下一篇:Vue-Awesome-Swiper实现缩略图控制循环,循环背景图,显示多图轮播,点击左右滚动一张图