以下是效果图片仅供参考
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 //持续的时间
})
}
})
}
})
}