小程序本地图片上传到七牛，图片上传机制。

小程序项目上经常会遇到要用户上传图片到服务器，来满足其自己的内容需求。

先去https://github.com/gpake/qiniu-wxapp-sdkgithub上搞个七牛js吧，只有qiniuUploader.js把这个放入小程序文件夹里就好。

（强烈建议仔细看github上的文档，里面其实写的非常仔细了）

 

这里不介绍wxml和wxss了，思路就是做个框，点击选择图片，如果只能传一张的就不让这个框继续出现。简单的wx:if判断一下就好。

我的项目里有三个地方需要上传图片到服务器，因此要先在data里定义三个xxxlist:[],这也是wxml wx:for显示图片的来源。然后继续定义三个xxxlist:[],这三个是存放上传到七牛后返回的网络路径，便于最后上传的你自己的服务器后台上。

wx.chooseImage，可以获得本地相册，count:可以定义图片数量，具体的百度一下非常详细。

 //选择图片方法
  uploadpic: function (e) {
    console.log(e.currentTarget.id)//因为定义了三种类型，所以用传id的方法来区别
    let that = this //获取上下文
    let upload_picture_list = that.data.upload_picture_list//获取list
    let xqlist = that.data.xqlist//获取list
    //选择图片
    wx.chooseImage({
      count: 8, // 默认9，这里显示一次选择相册的图片数量 
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
        let tempFiles = res.tempFiles
        if (e.currentTarget.id==0){
          //把选择的图片 添加到集合里
          for (let i in tempFiles) {
            tempFiles[i]['upload_percent'] = 0//这个是为了判断图片是不是上传过的，为了判断图片是否上传过的
            // tempFiles[i]['path_server'] = ''
            upload_picture_list.push(tempFiles[i])//将图片的地址path到我们第一次定义的list里
            // that.getqitokenup(tempFiles[i])
          }
          //显示到当前页面
          that.setData({
            upload_picture_list: upload_picture_list,
          });
        }else{
          //这里是另一种因为定义了三种类型
          for (let i in tempFiles) {
            tempFiles[i]['upload_percent'] = 0
            tempFiles[i]['path_server'] = ''
            xqlist.push(tempFiles[i])
            // that.getqitokenup(tempFiles[i])
          }
          //显示到当前页面
          that.setData({
            xqlist: xqlist,
          });
        }
       
      }
    })
  },

上面就已经把图片显示到当前页面了，但是数据都是临时的，接下来就把我们第一次定义的三个list做个循环判断，判断是不是空的还是有内容的，做个筛选。这里用if（xxxlist == ' '）{for let j in xxxlist}如果空就执行接下来的判断，不空的话就把这个list的内容循环上传到七牛，将let j 当前次序传送过去 （上传七牛是另一个函数）。

（因为我是点击按钮统一上传的，所以最后的三组上传到七牛是同时进行的，最后的结束判断依据影响到上传的结束所以很重要）

 

// 上传七牛
  getqitokenup3(e) {
    console.log(e)
    //获得当前时间，目的为了区别不同的时间戳，防止网址路径相同
    var timestamp = Date.parse(new Date());
    var date = new Date(timestamp);
    //年  
    var Y = date.getFullYear();
    //月  
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    //日  
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    var H = date.getMinutes();
    var M = date.getMinutes();
    var S = date.getSeconds();
    var time = Y.toString() + M.toString() + D.toString() + H.toString() + M.toString() + S.toString();
    console.log(time);
    var that = this

    let upload_picture_list = that.data.upload_picture_list//定义list
    var qnimgs = that.data.qnimgs//定义list
    var length2 = upload_picture_list.length//定义第一次（1）定义list的长度，为了判断服务器返回的list是否与上传的数量相同，为了识别是否上传完成
    let xqlist = that.data.xqlist//定义list
    var length = xqlist.length//定义第一次（2）定义list的长度，为了判断服务器返回的list是否与上传的数量相同，为了识别是否上传完成
    console.log(length)
    var xqimgs = that.data.xqimgs//定义list
    var index = e//当前id数量
    var vrlist = that.data.vrlist//定义list
    var vrimg = that.data.vrimg//定义list
    var lenght3 = vrlist.length//定义第一次（3）定义list的长度，为了判断服务器返回的list是否与上传的数量相同，为了识别是否上传完成
    console.log('sfagehdfhtrjjgy')
    //这里的if是为了判断图片是否是已经上传过的，
    if (vrlist[0].upload_percent == 1) {
      vrimg.push(vrlist[0].path)
      that.setData({
        vrimg: vrimg,
      })
      //这里的if是判断所用上传进程是否完成
      if (xqimgs.length == length && qnimgs.length == length2 && vrimg.length == lenght3) {
        that.imgok()
      }
      
    } else {
      var filepath = vrlist[0].path
      
      // console.log(filepath)
      //七牛上传
      qiniuUploader.upload(filepath, (res) => {
        vrimg.push(res.imageURL)
        console.log(res.imageURL)
        //返回服务器地址传到第二次定义的list
        that.setData({
          vrimg: vrimg,
        })
        //这里的if是判断所用上传进程是否完成
        if (xqimgs.length == length && qnimgs.length == length2 && vrimg.length == lenght3) {
          that.imgok()
        }



      },
        (error) => {
          //图片上传失败，可以在七牛的js里面自己加了一个err错误的返回值
          console.log('error: ' + error)

        },
        {
          // uploadURL: 'https://up.qiniup.com',
          domain: 'https://data.ehometd.com',//图片地址
          region: 'SCN',
          // key: 'ces.jpg',//图片命名
          // uptoken: token//在onLoad中执行获取uploadToken
          uptokenURL: 'https://www.ehometd.com/temporary/api/other/all.php?fc=getqntoken2&key=' + 'myaj/' + getApp().globalData.userID + '/' + time,//获取upToken的url
          // uptokenFunc: function () { return '[yourTokenString]'; }
        },
        (res) => {
          console.log('上传进度', res.progress)
          console.log('已经上传的数据长度', res.totalBytesSent)
          console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        }, () => {
          // 取消上传
        }, () => {
          // `before` 上传前执行的操作
        }, (err) => {
          // `complete` 上传接受后执行的操作(无论成功还是失败都执行)




        })
    }


  },