微信小程序thinkphp5多图上传

2019-08-20

60

小程序完整的多图上传代码,本人自己线上用的,


js

// pages/member/index/kefu.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    //户型   这是一个本地的对象,然后绑定到页面上

    pic_array: [

      { id: 0, name: '衬衫' },

      { id: 1, name: 'polo衫' },

      { id: 2, name: '西服' },

      { id: 3, name: '鞋子' },

    ],

   

    index: 0,

    multiIndex: [0, 0],

    //传到后台的课程分类

    cname: '',

    imgs: [],

   

    hx_index: 0,

    leixing:'',

    imgurl1:'',

    imgurl2: '',

    imgurl3: '',

    imgurl4: '',

  },

  chooseImg: function (e) {

    var that = this;

    console.log(that);

    if (that.data.cname == '') {

    } else {

      var imgs = this.data.imgs;

      if (imgs.length >= 9) {

        this.setData({

          lenMore: 1

        });

        setTimeout(function () {

          that.setData({

            lenMore: 0

          });

        }, 2500);

        return false;

      }

    }

    wx.chooseImage({

      // count: 1, // 默认9

      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

      success: function (res) {

        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

        var tempFilePaths = res.tempFilePaths;

        var imgs = that.data.imgs;

        console.log(res, 5255);

        // console.log(tempFilePaths + '----');

        for (var i = 0; i < tempFilePaths.length; i++) {

          if (imgs.length >= 4) {   //最多上传4张图

            that.setData({

              imgs: imgs

            });

            return false;

          } else {

            imgs.push(tempFilePaths[i]);

          }

        }

        // console.log(imgs);

        that.setData({

          imgs: imgs,

        });

       

      }

    });

  },

  // 删除图片

  deleteImg: function (e) {

    var imgs = this.data.imgs;

    var index = e.currentTarget.dataset.index;

    imgs.splice(index, 1);

    this.setData({

      imgs: imgs

    });

    //删除图片的时候把imgurl变量清空

    this.setData({

      imgurl1: '',

      imgurl2: '',

      imgurl3: '',

      imgurl4: ''

    })

  },

  // 预览图片

  previewImg: function (e) {

    //获取当前图片的下标

    var index = e.currentTarget.dataset.index;

    //所有图片

    var imgs = this.data.imgs;

    wx.previewImage({

      //当前显示图片

      current: imgs[index],

      //所有图片

      urls: imgs

    })

  },

  bindPickerChange_hx: function (e) {

    console.log('picker发送选择改变,携带值为', e.detail.value);

   

    this.setData({   //给变量赋值

      hx_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容,显示的内容和选择的内容一致

      leixing: this.data.pic_array[e.detail.value].name

    })

    console.log('自定义值:', this.data.hx_select);

    console.log(this.data.leixing);

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (e) {

    wx.request({

      url:,

      header: {

        "Content-Type": "application/x-www-form-urlencoded"

      },

      method: "POST",

      data: {

        user_openid: wx.getStorageSync('user_openid'),

        onload:'onload'

      },

      success: function (res) {

        if (res.data =='您没有下过单'){

          wx.showToast({

            title: res.data,

            icon: 'loading',

            duration: 3000

          });

          setTimeout(function () {

            wx.navigateBack({

              delta: 1

            })

          }, 3000)

        }       

      },

    })

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  queren:function(e){

    var that = this

    //循环把图片上传到服务器

    var imgs = that.data.imgs

    for (var i = 0; i < imgs.length; i++) {

      wx.uploadFile({

        url:,

        filePath: imgs[i],

        name: 'files',

        formData: {

          cname: that.data.cname

        },

        success: function (res) {

          var data = res.data.replace(/\"/g, "");

          if (that.data.imgurl1 == '') {

            that.setData({

              imgurl1: data

            })

          } else if (that.data.imgurl2 == '') {

            that.setData({

              imgurl2: data

            })

          } else if (that.data.imgurl3 == '') {

            that.setData({

              imgurl3: data

            })

          } else if (that.data.imgurl4 == '') {

            that.setData({

              imgurl4: data

            })

          }

        }

      })

    }

  },

  formSubmit:function(e){

    if (e.detail.value.xingming == '') {

      wx.showToast({

        title: '请填写姓名!',

        icon: 'none',

        duration: 3000

      })

      return false;

    }

    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;

    if (!myreg.test(e.detail.value.shoujihao)) {

      wx.showToast({

        title: '手机号有误!',

        icon: 'none',

        duration: 1500

      })

      return false;

    }

DLweb`build
度良网络科技有限公司为您建设最时尚前沿的网站以及高端网站设计

沪ICP备16017573号

Copyright©2018 度良 All Rights Reserved.

友情链接:

义乌网站建设