微信小程序之七牛云实现多张图片上传效果

Page({

  /**
   * 页面的初始数据
   */
  data: {
    temp:[],
    changColor: false,
    sendFlag: false,
    pencilimg: "../../../assets/img/pencil.png",
    tempFilePaths: [],
    tempFilepath:"../../../assets/img/camera.png",
    noterecord: ["所有人", "好友可见", "仅自己可见"],
    addsite: "添加地点"
  },
  album: function() {
    var _this = this
    wx.chooseImage({
      count: 9, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有  
      sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有  
      success: function(res) {
        // const tempFilePaths = res.tempFilePaths
        const filepath = res.tempFilePaths[0]
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片    
        qiniuUploader.upload(filepath, res => {
        //七牛云js中封装的方法 成功的话就把链接push给data中的空数组
         _this.data.tempFilePaths.push(app.globalData.urlst + "/" + res.key)
          if (_this.data.tempFilePaths.length>1){
            _this.setData({

             //当push进去的链接大于一个时 就在底下显示缩略图 
              temp: _this.data.tempFilePaths
            })
          }
          _this.setData({
            tempFilePath:app.globalData.urlst +"/"+ res.key
          })
          console.log(_this.data.tempFilePath)
        }, (error) => {
          console.log('error' + error)
        }, {
          uploadURL: 'https://up-z1.qbox.me/',

          domain: 'bzkdlkaf.bkt.clouddn.com',

          uptoken: _this.data.uploadToken,
        })
      }
    })
  },

这里面值得注意的是 要在data中设置两个空数组供其使用

猜你喜欢

转载自blog.csdn.net/weixin_42790916/article/details/82740699