微信小程序实现上传图片功能:【复制即可展示效果】
<!--wxml-->
<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)
})
}
})
}
})
效果预览:
![]() |
![]() |