1.初始images數組
2.將上傳圖片的路徑拼接給images數組
```
uploadImg: function(event) {
var _this = this;
//1.選擇圖片
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: _this.data.images.concat(tempFilePaths)
});
//console.log(_this.data);
}
})
},
```
在comment.html頁面加入代碼
```
<image class = "comment-img"src = "{{item}}"wx: for = "{{images}}"wx: key = "{{index}}" > </image>
```
效果：
comment.js源碼
```
// pages/comment/comment.js
var App = getApp();
Page({
/**
* 頁面的初始數據
*/
data: {
content: '',
// 評價的內容
score: 5,
// 評價的分數
images: [],
// 上傳的圖片
detail: [],
},
submit: function() {
console.log(this.data.content);
console.log(this.data.score);
},
onContentChange: function(event) {
this.setData({
content: event.detail
});
},
onScoreChange: function(event) {
this.setData({
score: event.detail
});
},
uploadImg: function(event) {
var _this = this;
//1.選擇圖片
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: _this.data.images.concat(tempFilePaths)
});
//console.log(_this.data);
}
})
},
/**
* 獲取電影詳情
*/
getdetail: function(movieid) {
wx.showLoading({
title: '加載中',
}) var _this = this;
var movieId = movieid
var url = 'http://test.36519.com/api/index/detail.html?moiveid=' + movieid;
console.log(url);
App._get(url, {},
function(result) {
//console.log(result);
_this.setData({
detail: result.data,
});
});
wx.hideLoading();
//console.log(_this.data);
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function(options) {
//console.log(options);
this.getdetail(options.movieid);
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function() {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {
}
})
```
comment.wxml源碼
```
< !--pages / comment / comment.wxml--><view class = '' > <view class = 'detail-container'style = 'background: url({{detail.image}}) no-repeat top/cover' > </view>
<view class='detail-mask'></view > <view class = 'detail-info' > <image src = "{{detail.image}}"class = 'detail-img' > </image>
<view class='detail'>
<view class='detail-nm'>{{detail.name}}</view > <view > {
{
detail.leader
}
} < /view>
<view class='detail.sc'>{{detail.score}}分</view > <view > kkkkk < /view>
<view>導演：xxxx</view > </view>
</view > <view class = 'desc' > {
{
detail.content
}
} < /view>
<!-- 評價 -->
<view class="comment-container">
<van-field value="{{ content }}" placeholder="寫一些評價吧" bind:change="onContentChange" / > <text > \r\n < /text>
<van-rate value="{{ score }}" bind:change="onScoreChange" / > <text > \r\n < /text>
<van-button type="warning" bindtap="uploadImg">上傳圖片</van - button > <text > \r\n < /text>
<view>
<image class="comment-img" src="{{item}}" wx:for="{{images}}" wx:key="{{index}}"></image > </view>
<text>\r\n</text > <van - button size = "large"type = "danger"bindtap = "submit" > 提交評價 < /van-button>
</view > <!--評價end--></view>
```
