小程序上传、删除、预览图片
图片预览
wxml
<image src="{{baseUrl}}{{imgSrc}}" mode="widthFix" data-src="{{baseUrl}}{{imgSrc}}" bindtap=\'previewImage\'></image>js
previewImage: function (e) {
console.log(1);
var current = e.target.dataset.src; //这里获取到的是一张本地的图片
wx.previewImage({
current: current,//需要预览的图片链接列表
urls: [current] //当前显示图片的链接
})
},以下上传、删除图片
wxml
<!-- 评价 -->
<view class=\'comment_box flexBetween\'>
<image src=\'{{baseUrl}}{{orderInfo.thumb_img}}\' mode=\'aspectFill\' width: 100rpx;height:100rpx;\'></image>
<view display:inline-block;margin-left:20rpx;\'>
<view>满意度评价</view>
<!-- 星星评价-->
<view class="comment-right">
<block wx:for="{{[0, 1, 2, 3, 4]}}" wx:key=\'\'>
<image wx:if="{{ index < starId }}" src="/images/common/comment01.png" bindtap="startTap" ></image>
<image wx:else src="/images/common/comment01_hui.png" bindtap="startTap" ></image>
</block>
</view>
</view>
</view>
<!-- 评价内容 -->
<view class=\'comment_box\'>
<textarea placeholder=\'亲！ 留下你的评论吧~\' placeholder-color:#999;\' bindinput="bindContent"></textarea>
<!-- 上传图片 -->
<view class=\'chooseImg\'>
<image wx:for="{{imagesList}}" wx:key="index" src=\'{{item}}\' mode=\'aspectFill\' width:210rpx;height:210rpx;\' data-index="{{index}}" bindlongtap="deleteImage"></image>
<image wx:if="{{num < maxLength}}" src=\'/images/common/uploadImg.png\' mode=\'widthFix\' width:210rpx;\' bindtap=\'uploadImg\'></image>
</view>
</view>
<!-- 提交评论 -->
<view class=\'btnBox\'>
<view class=\'submit_btn flexCenter\' bindtap="submitComment">发布</view>
</view>js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
baseUrl: app.globalData.baseUrl,
starId: 0, //星级个数
imagesList: [],
content: \'\', //评论内容
orderInfo: {}, //存放当前评价的商品信息
num: 0,//已上传的图片数量
maxLength: 6//允许上传的最大数量
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log(options);
var orderInfo = JSON.parse(options.orderInfo);
this.setData({
orderInfo: orderInfo,
shop_id: options.shop_id
})
},
/**
* 点击星星评分
*/
startTap: function(e) {
this.setData({
starId: parseInt(e.currentTarget.id) + 1
});
},
// 更新评论内容
bindContent: function(e) {
this.setData({
content: e.detail.value
})
},
// 上传图片
uploadImg: function() {
var that = this;
let imagesList = [];
let maxSize = 1024 * 1024;
let flag = true;
wx.chooseImage({
count: that.data.maxLength - that.data.imagesList.length, //最多可以选择的图片总数
sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
wx.showToast({
title: \'正在上传...\',
icon: \'loading\',
mask: true,
duration: 500
})
for (let i = 0; i < res.tempFiles.length; i++) {
if (res.tempFiles[i].size > maxSize) {
flag = false;
console.log(111)
wx.showModal({
content: \'图片太大，不允许上传\',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log(\'用户点击确定\')
}
}
});
}
}
if (res.tempFiles.length > that.data.maxLength) {
console.log(\'222\');
wx.showModal({
content: \'最多能上传\' + that.data.maxLength + \'张图片\',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log(\'确定\');
}
}
})
}
if (flag == true && res.tempFiles.length <= that.data.maxLength) {
that.setData({
imagesList: that.data.imagesList.concat(res.tempFilePaths),
num: that.data.num + res.tempFiles.length
})
}
console.log(res);
},
fail: function(res) {
console.log(res);
}
})
},
/**删除图片 */
deleteImage: function (e) {
var that = this;
wx.showModal({
title: \'提示\',
content: \'确定删除图片吗？\',
success(res) {
if (res.confirm) {
var imagesList = that.data.imagesList;
var index = e.currentTarget.dataset.index;
imagesList.splice(index, 1);
var num = that.data.num - 1
that.setData({
imagesList: imagesList,
num: num,
});
} else if (res.cancel) {
console.log(\'用户点击取消\')
}
}
})
},
// 提交评论
submitComment: function() {
var that = this;
if (that.data.starId == 0) {
wx.showToast({
title: \'满意度评价不能为空\',
icon: \'none\',
duration: 2000
});
return false;
}
if (that.data.content.length <= 0) {
wx.showToast({
title: \'评价内容不能为空\',
icon: \'none\',
duration: 2000
});
return false;
}
var url = app.globalData.reqUrl + \'shop_goods_evaluate/goods_evaluate\';
var params = {
user_id: app.globalData.userId,
order_number: this.data.orderInfo.shop_order_number,
goods_id: this.data.orderInfo.goods_id,
attr: this.data.orderInfo.attr,
title: this.data.orderInfo.title,
thumb_img: this.data.orderInfo.thumb_img,
content: this.data.content,
grade: this.data.starId,
shop_id: this.data.shop_id
}
app.request.requestPostApi(url, params, this, this.successFun_goComment, this.failFun);
},
successFun_goComment: function(res, selfObj) {
var that = selfObj;
console.log(res);
if (res.code == 200) {
var id = res.id;
console.log(res);
wx.showLoading({
title: \'上传中...\',
icon: \'loading\'
})
for (let i = 0; i < that.data.imagesList.length; i++) {
wx.uploadFile({
url: app.globalData.reqUrl + \'shop_goods_evaluate/upload? + id,
filePath: that.data.imagesList[i],
name: \'uploadfile_ant\',
header: {
"Content-Type": "multipart/form-data"
},
success: function(data) {
console.log(data);
if ((that.data.imagesList.length - 1) == i) {
wx.hideLoading();
wx.showToast({
title: \'评价成功\',
icon: \'none\',
duration: 2000
})
that.setData({ starId: 0, //星级个数
imagesList: [],
content: \'\', //评论内容
orderInfo: {}, //存放当前评价的商品信息
num: 0,//已上传的图片数量 }); setTimeout(function() { wx.redirectTo({ url: \'/pages/orderList/orderList?status=all\', }) }, 2000) } }, fail: function(data) { console.log(data); } }); } }else { wx.showToast({ title: res.message, icon: \'none\' }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })