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

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

实现思路:

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

你可能感兴趣的:(微信小程序学习笔记五(持续更新)---小程序上传文件)