微信小程序学习笔记五（持续更新）---小程序上传文件

项目中需要用户上传图片，需要实现，上传按钮默认为一个，在上传一张图片之后，自动增加一个上传按钮，上传三张图片后按钮消失。

实现思路：

1、图片路径存储在一个数组中，增加和删除图片是对数组进行操作；
2、仅一个按钮，添加计数器，num=1;当num==3时，设置按钮隐藏。
直接上代码：
.wxml文件：

 
    
    
  
  
    
      +
      添加图片
    
  

.wxss代码：

.uploader{
position: relative;
width: 175rpx;
height: 175rpx;
background: #F0F0F2;
margin-top:50rpx;
border-radius:10rpx;
float: left;
margin-right:20rpx;
}
.add-icon{
position: absolute;
font-size:105rpx;
top:-23rpx;
left:50rpx;
color: #A3A3A3;
}
.title{
position:absolute;
bottom:30rpx;
left:32rpx;
color:#A3A3A3;
font-size:31rpx;

}
.upload-img{
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.cha{
z-index:3;
width:30rpx;
height:30rpx;
position:absolute;
right:0;

}

.js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    upload: true,
    files: [],
    sum: 0,
  },
  //  上传图片
  previewImage: function () {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: (res) => {
         console.log(res) // 打印输出返回值
          let files = this.data.files 
          files.push(res.tempFilePaths[0]) // 把图片地址push到数组中
          let sum = this.data.sum
          sum++  // 开始计数
          this.setData({
            sum: sum
          })
          if (this.data.sum == 3) { // 如果sum==3隐藏上传按钮
            this.setData({
              upload: false
            })
          }
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          this.setData({
            files: files
          });
 
      }
    })
  },

  // 删除图片
  delete: function (e) {
    let index = e.currentTarget.dataset.index
    let files = this.data.files
    files.splice(index, 1)
    this.setData({
      files: files
    })
    if (this.data.files.length == 0) {
      this.setData({
        upload: true,
        sum: 0
      })
    }
  }
  })

转载于:https://www.cnblogs.com/sevenbreey/p/9845975.html