微信小程序 上传图的功能

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

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

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

时间: 2024-11-09 09:40:00

微信小程序 上传图的功能的相关文章

微信小程序上传后发布或者体验版测试无数据

在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书”勾选上,然后上传,重新刷新微信小程序官方页面,重新打开二维码进行体验. 此文章为原创,转载时请标明原文章出处,谢谢大家! 原文地址:https://www.cnblogs.com/lynna/p/9199315.html

微信小程序 上传、预览、删除图片

<view class="allImgBox"> <view class="imgBox" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{item}}" data-index="{{index}}" mode="aspectFill"

微信小程序上传一或多张图片

一.要点 1.选取图片 wx.chooseImage({ sizeType: [], // original 原图,compressed 压缩图,默认二者都有 sourceType: [], // album 从相册选图,camera 使用相机,默认二者都有 success: function (res) { console.log(res); var array = res.tempFilePaths, //图片的本地文件路径列表 }}) 2.上传图片 wx.uploadFile({ url:

微信应用号小程序上传wx.uploadFile(OBJECT)

微信应用号小程序上传wx.uploadFile(OBJECT) wx.uploadFile(OBJECT) ? 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器.客户端发起一个HTTPS POST请求,其中 Content-Type 为 multipart/form-data . OBJECT参数说明: 参数 类型 必填 说明 url String 是 开发者服务器url filePath S

记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程

开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝牙/NFC读写器,然后通过蓝牙发送指令操作读写器对15693协议的芯片进行读写操作. DAY #1 上午开了半天会,下午开始开发. 先开发简单的:直接通过Android手机的NFC模块读写芯片.开发思路如下: 1. 首先调用 wx.getHCEState(OBJECT), 判断设备是否支持NFC,如

微信小程序中-折线图

echarts配置项太多了,还是一点点积累吧~~~~~ 当然前提条件还是得老老实实看echarts官方文档 :https://echarts.baidu.com/ 今天主要就介绍下我在工作中通过echarts实现的微信小程序的折线图 Demo地址:https://gitee.com/v-Xie/echartsDemo.git 效果嘛如下: 通过此图分析得出需要实现以下几点:(主要配置代码请看后面部分) 1.标题(折线图)-title 需:颜色,文本,位置 2.图例(财运,感情,事业)-legen

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

之前写过一篇小程序商品发布的博客,里面有上传多张图片的功能,这里单独拿出来实现一下,小程序的upLoadFile一次只能上传一张图片,需要循环调这个接口来实现 for (var i = 0; i < that.data.banner.length; i++) { wx.uploadFile({ url: app.globalData.baseUrl + '/wechat/release/addProductPhoto', filePath: that.data.banner[i], name:

超详细,用canvas在微信小程序上画时钟教程

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟, 首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html 和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp 我觉得其实除了删减一些内容之外没什么太大的区别 直接贴代码: wxml <!--index.wxml-->

微信小程序学习Course 7 定时器功能

微信小程序学习Course 7 定时器功能 微信小程序中有一个定时器API函数,其提供了四个API接口 7.1.number setTimeout(function callback, number delay, any rest) 设定一个定时器,在定时到期以后执行注册的回调函数,值得注意的是本函数只执行一次!!!! setTimeout(this.DaoJiShi, 1000);//时间到达一秒执行一次DaoJiShi函数 如果我们想实现一个不停调用的函数,怎末实现呢?以下函数利用递归实现了