API组件名称:wx.chooseMedia
微信版本号:Android 8.0.9
基础库:2.19.4
根据腾讯教程做图片上传功能,最后提示“未定义” ,代码如下
<!--pages/demo-04/demo04.wxml-->
<view class="comment">
<view class="comment-upload">
<view class="comment-upload-add" bindtap="uploadImg">
<text class="comment-upload-add-icon">+</text>
<text class="comment-upload-add-des">点击上传图片</text>
</view>
<image src="{{form.img}}" class="comment-upload-thumbnail" ></image>
</view>
<textarea class="comment-text" placeholder="打开脑洞,留下评论!"></textarea>
<button class="comment-save">保存</button>
</view>
/* pages/demo-04/demo04.wxss */
Page{
width: 100%;
height: 100%;
}
.comment{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.comment-upload{
flex: 0 0 400rpx;
/* margin: 20rpx 20rpx 0; */
padding:20rpx 20rpx 0;
}
.comment-upload-thumbnail{
background-color: gold;
width: 100%;
height: 400rpx;
}
.comment-upload-add{
display: flex;
flex-direction: column;
align-items: center;
justify-content:center;
background-color:#eff1f3;
color: #bfbfbf;
height: 400rpx;
}
.comment-text{
flex: 1;
box-sizing: border-box;
width: 100%;
padding: 30rpx;
font-size: 28rpx;
}
.comment-upload-add-icon{
font-size: 200rpx;
line-height: 1;
margin-top:-40;
}
.comment-save{
flex: 0 0 90rpx;
margin: 20rpx; /*margin是指定周边的距离值,值是上右下左的顺序*/
background-color: #33c9ff;
color: #fff;
}
// pages/demo-04/demo04.js
Page({
data: {
form:{
img:''
}
},
uploadImg:function(){
wx.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success:(res) => {
console.log(res)
// console.log(res.tempFiles.tempFilePath)
// console.log(res.tempFiles.size)
this.setData({
'form.img':res.tempFilePaths[0]
})
}
})
}
})