1 首先,添加上传按钮
<van-button type="default" bindtap="uploadImg">上传图片
2 添加uploadImg方法
/** * 页面的初始数据 */ data: { detail: {}, content: ‘‘, //评价的内容, score: 5, //当前评价的分数 images: [], //上传的图片 fileIds: [], //上传的图片的云存储的id movieId: -1 },
uploadImg: function(event) { //选择图片 wx.chooseImage({ count: 9, sizeType: [‘original‘, ‘compressed‘], sourceType: [‘album‘, ‘camera‘], success: res => { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; //console.log(tempFilePaths); this.setData({ //取到当前图片的images 然后拼接起来,如果直接赋值 会覆盖掉 images: this.data.images.concat(tempFilePaths) }); } }) },
3 把上传的图片循环显示出来
<view> <image class="comment-img" wx:for="{{images}}" wx:key="{{index}}" src="{{item}}" > </image> </view>
/* pages/comment/comment.wxss */ .comment-img{ width: 200rpx; height: 200rpx; margin-right: 20rpx; }
<--------已上传的图片
4 上传到云存储,然后云存储返回fileid