微信小程序之上传图片功能

微信小程序实现上传图片功能:【复制即可展示效果】


<view class="contain">
  <image wx:for="{{image_url}}" src="{{item}}">image>
view>
<button bindtap="uploadImage">点击上传图片button>
/*wxss*/
.contain{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
image{
  width: 200rpx;
  height: 200rpx;
}
//js
Page({
  data:{
    image_url:[]
  },
  uploadImage(){
    var that =this
    wx.chooseMedia({
      count: 9,
      mediaType: ['image','video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success:(res)=>{
        console.log(res.tempFiles[0].tempFilePath);
        that.setData({
          image_url:that.data.image_url.concat(res.tempFiles[0].tempFilePath)
        })
      }
    })
  }
})

效果预览:

微信小程序之上传图片功能_第1张图片
微信小程序之上传图片功能_第2张图片

微信小程序之上传图片功能_第3张图片

你可能感兴趣的:(微信小程序,微信小程序,小程序,前端)