微信小程序自我总结2，图片上传和Promise（微信小程序获取地理位置 微信小程序上传图片 微信小程序云存储 微信小程序setData性能）

菜鸟第二篇总结

注册界面

company.js

const QQMapWX = require('../company/qqmap-wx-jssdk'); //获取地址的API的js文件引用
let qqmapsdk;
const db = wx.cloud.database(); // 这个容易忘掉，忘写就无法上传云数据库

Page({
  data: {
    companyName:'',
    companyAdress:'',
    simpleCompanyA:'',
    aheadTime:'',
    roomtimes:'',
    roomNumber:'',
    companyImg:[],
    fileids:[],
    openid:''
  },

  upcompanyImg:function(e){
    if(this.data.companyImg.length<4){
      wx.chooseImage({
        count: 4-this.data.companyImg.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res=>{
          // tempFilePath 可以作为img标签的src属性显示图片(小程序临时文件路径)
          // console.log(res)
          const tempFilePaths = res.tempFilePaths
          // console.log(tempFilePaths)
          this.setData({
            companyImg:this.data.companyImg.concat(tempFilePaths)
          }) 
        },
        fail:err=>{
          console.log(err);
          wx.showToast({
            title: '上传图片失败',
            mask:true,
            icon:'none'
          })
        }
      })
    }else{
      wx.chooseImage({
        count: 4,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res=>{
          const tempFilePaths = res.tempFilePaths
          this.data.companyImg=[];
          this.setData({
            companyImg:this.data.companyImg.concat(tempFilePaths)
          }) 
        },
        fail:err=>{
          console.log(err);
          wx.showToast({
            title: '上传图片失败',
            mask:true,
            icon:'none'
          })
        }
      })
    }
  },
  //判断图片上传个数4-数组长度，如果等于4，则清空数组并上传图片
  
  // 获取picker选择的时间
  bindTimeChange:function(e){
    // console.log(e)
    this.setData({
      roomtimes: e.detail.value
    })
  },
  
  // 微信获得经纬度
  getUserLocation:function(){
    qqmapsdk = new QQMapWX({
        key: 'XXXXXXXXX'
        // 腾讯定位提供的密匙，而不是小程序密匙
    });
    let vm = this;
    wx.getSetting({
      success: (res) => {
        // console.log(JSON.stringify(res))
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                    //再次授权，调用wx.getLocation的API
                    vm.getLocation();
                  } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          vm.getLocation();
        }else {
          //调用wx.getLocation的API
          vm.getLocation();
        }
      }
    })
  },

  // 获取当前地理位置
  getLocation: function () {
    let vm = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        // console.log(JSON.stringify(res))
        var latitude = res.latitude
        var longitude = res.longitude
        vm.getLocal(latitude, longitude)
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
        wx.showToast({
          title: '获取位置失败',
        })
      }
    })
  },
  
  // 获取后将其赋值给companyAdress
  getLocal: function (latitude, longitude) {
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        // console.log(JSON.stringify(res));
        let province = res.result.address_component.province
        let city = res.result.address_component.city
        let district =res.result.address_component.district
        let address_reference = res.result.address_reference.town.title
        let street = res.result.address_component.street
        let street_number =res.result.address_component.street_number
        vm.setData({
          companyAdress:province+city+district+address_reference+street+street_number
        })
      },
      fail: function (res) {
        console.log(res);
        wx.showToast({
          title: '获取位置失败',
        })
      },
    })
  },
  
  // 如果用户自己输入地址，则获取
  inputAdress:function(e){
    this.setData({
      companyAdress:e.detail.value
    })
  },
  
  // 获取用户填写的标志性地址
  inputsimpleA:function(e){
    this.data.simpleCompanyA=e.detail.value;
  },
  
  inputName:function(e){
    // console.log(e)
    this.setData({
      companyName:e.detail.value
    })
  },
  // 获取用户输入的饭店名称

  inputAheadTime:function(e){
    this.setData({
      aheadTime:e.detail.value
    })
  },
  // 获取用户输入的最大提前订餐时间

  inputNumber:function(e){
    this.setData({
      roomNumber:e.detail.value
    })
  },
  // 获取用户输入的包间个数

  upCloudDb:function(e){
    if(this.data.companyImg.length>=3 && this.data.companyName !== "" && this.data.companyAdress !== "" && this.data.aheadTime !== ""){
      wx.showLoading({
        title: '提交中',
        mask: true,
      })

      // 上传图片到云存储
      let promiseAarr = [];
      for(let i=0;i<this.data.companyImg.length;i++){
        promiseAarr.push(new Promise((reslove,reject)=>{
          let item = this.data.companyImg[i];
          let suff = /\.\w+$/.exec(item)[0];
          // console.log(suff)
          // 正则表达式，\w为匹配包括下划线的任何单词字符，等于"A-Za-z0-9_"
          wx.cloud.uploadFile({
            cloudPath: "Companyimg/"+ this.data.openid + '/' + new Date().getTime() + suff, 
            // 上传至云端的路径,不能在Companyimg前面加/
            filePath: item, // 小程序临时文件路径
            success: res => {
              // 返回文件 ID
              // console.log(res.fileID)
              this.setData({
                fileids:this.data.fileids.concat(res.fileID)
              })
              reslove();
            },
            fail:err=>{
              wx.showToast({
                title: '注册失败',
                mask:true,
                icon:'none'
              })
              console.log(err)
            }
          })
        }))
      }
      
      Promise.all(promiseAarr).then(res=>{
        // 插入数据
        db.collection("company").add({
          data:{
            companyName:this.data.companyName,
            companyAdress:this.data.companyAdress,
            simpleCompanyA:this.data.simpleCompanyA,
            aheadTime:this.data.aheadTime,
            roomtimes:this.data.roomtimes,
            roomNumber:this.data.roomNumber,
            fileids:this.data.fileids
          } 
        }).then(res=>{
          wx.hideLoading();
          wx.redirectTo({
            url: '../../companyuser/companyuser',
          })
        }).catch(err1=>{
          wx.hideLoading();
          wx.showToast({
            title: '注册失败',
            mask:true,
            icon:'none'
          })
          console.log(err1)
        })
      }).catch(err=>{
        console.error
        wx.showToast({
          title: '注册失败',
          mask:true,
          icon:'none'
        })
        console.log(err)
      })
    }else{
      wx.showModal({
        title: '提示',
        content: '您的资料填写不完整',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  },
  // 上传用户信息上传照片到云存储，保存数据到数据库

  newgetLocation:function(e){
    wx.getSetting({
      success:res=>{
        res.authSetting['scope.userLocation'] == 'undefined'
      }
    })
    this.getUserLocation()
  },
  // 点击重新定位后清空getSetting

  onLoad: function (options) {
    this.getUserLocation();
    let app = getApp();
    this.data.openid=app.globalData.openid
  },
  // 加载时就获取用户地址
})

首先，介绍第一个函数

upcompanyImg

这就是一个上传图片的函数，但是一开始我还真的是写不出来，因为如果固定为4，一次性上传4张或以下图片是完全没得问题的，但是，一旦你先上传三张又想再上传，那麻烦就来了，你会发现用户最多还可以上传4张，这样一加就7张了，完全不可理喻。所以我的解决方法就是这：

count: 4-this.data.companyImg.length

先判断已上传的图片的数组的大小，如果小于4，则可以上传剩余图片个数，否则就又可以上传4张，并将原来的清空：

this.data.companyImg=[];
this.setData({
   companyImg:this.data.companyImg.concat(tempFilePaths)
 })

也就是，上传之前将图片数组清空，不然别人如果感觉上传的图片不好的话，想重新上传，不清空那么上传又会变多。

其实我感觉到了这种写法的不好，代码无法复用所以在另一个里面写的是这样的：

else{
	  this.data.companyImg=[];
      wx.chooseImage({
        count:4-this.data.companyImg.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res=>{
          // tempFilePath可以作为img标签的src属性显示图片(小程序临时文件路径)
          // console.log(res)
          this.setData({
            companyImg:this.data.companyImg.concat(res.tempFilePaths)
          }) 
        },
        fail:err=>{
          console.log(err);
          wx.showToast({
            title: '上传图片失败',
            mask:true,
            icon:'none'
          })
        }
      })
    }

这样写，这可以把上传图片代码封装起来，然后就可以复用了。

第二点

我这个里面把输入信息都用了setData，其实这是完全没必要的，而且会影响页面性能，其实只需要：

this.data.XXXX=e.detail.value

后面的页面中我都改成了这种形式。

第二个值得讲的函数

upCloudDb

这个就是一个并行执行异步操作的上传函数，我一开始是完全写不出来的，只能到处照搬，不过写多了，理解就会了一点，慢慢的已经可以写出大部分代码了。

里面就是Promise的并行异步任务的处理，其代码是这样理解的：
1、创建一个数组，因为并行执行异步任务的参数就是数组，是任务的数组
2、每一个任务都是一个Promise对象（new Promise），拥有then，catch方法，简化异步操作 见该博客

3、既然都是Promise对象，那么它们就可以使用Promise.all()方法，当数组里面所有方法执行完成后，便可以执行后面的操作。

获取位置的代码是我直接copy过来的。

菜鸟的一点垃圾言论，望大佬指点江山，激扬文字