以下是效果图片仅供参考
wxml:
<view class="imgbox"> <view class="add"> <image src="{{images}}" mode="aspectFill"></image> </view> <view class="button_comment"> <image src="/image/jiahao.png" bindtap="chooseImage" /> </view> </view>
wxss:
.imgbox{ width: 100%; height: 130px; display: flex; } .add{ width: 30%; } .add image{ width: 90%; height: 110px; } .button_comment{ width: 30%; height: 110px; text-align: center; background-color:#e0dede; margin-bottom: 20px; line-height: 150px; } .button_comment image{ width: 40%; height: 50px; }
js:
chooseImage: function () { wx.chooseMedia({ count: 2, mediaType: ['image', 'video'], sourceType: ['album', 'camera'], maxDuration: 30, camera: 'back', success: (res) => { console.log(res.tempFiles); let image = res.tempFiles[0].tempFilePath // console.log(image); this.setData({ images: image }) wx.uploadFile({ url: getApp().globalData.url + '/science/upload', filePath: image, name: 'file', success: (res) => { var data = JSON.parse(res.data); // 发表评论图片 this.data.thimg = data.front_file; wx.showToast({ title: '上传成功', icon: 'success', duration: 2000 //持续的时间 }) } }) } }) }