码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 上传图的功能

时间:2019-02-11 12:44:47      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:feed   程序   时间   temp   source   name   mamicode   div   单击   

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

技术图片 

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

 

微信小程序 上传图的功能

标签:feed   程序   时间   temp   source   name   mamicode   div   单击   

原文地址:https://www.cnblogs.com/zhenga/p/10361275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!