小程序之上传图片

260 阅读1分钟

当我们点击上传图片之后 如何让上传图片这几个字消失并且替换成下一张图片呢?大家可以试试我的方法

wxml

<view>
    <view class='border' bindtap="uploadImg" wx:if="{{isImg}}">上传图片</view>
  <view wx:if="{{tempFilePaths.length}}" >  
    <image wx:for="{{tempFilePaths}}"  wx:key="{{key}}" src="{{item}}" bindtap="updateImg"></image>
  </view>
</view>

wxss

.border{
    width:200rpx;
    height:200rpx;
    background: red;
}

js

Page({
    data:{
      tempFilePaths:[],
      uploadLinks:[],
      isImg:true
    },
    uploadImg() {
      var _this = this;   
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'],      // 可以指定来源是相册还是相机,默认二者都有 
        success: function (res) {
          _this.setData({  
            tempFilePaths: res.tempFilePaths,   //返回的 res.tempFilePaths 是数组
            uploadLinks: res.tempFiles  ,        //返回的 res.tempFiles 是由多个对象组成的数组
            isImg:false
          })
        }
      })
    },
    updateImg() {
        var _this = this;   
        wx.chooseImage({
          count: 9, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'],      // 可以指定来源是相册还是相机,默认二者都有 
          success: function (res) {
            _this.setData({  
              tempFilePaths: res.tempFilePaths,   //返回的 res.tempFilePaths 是数组
              uploadLinks: res.tempFiles  ,        //返回的 res.tempFiles 是由多个对象组成的数组
              isImg:false
            })
          }
        })
      },
  })