直接帖代码
wxml
<view style="background-color: #ffffff;padding: 30rpx;margin: 25rpx;border-radius: 40rpx;">
<view style="display: flex;flex-direction: column;margin-left:30rpx">
<view style="display: flex;margin-top: 40rpx;align-items: center;">
<view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">社团名称</view>
<input bindinput="shetuan_title" placeholder="" maxlength="15" style="border-bottom: 1px solid #a1a1a1;" />
</view>
<view style="display: flex;margin-top: 40rpx;align-items: center;">
<view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all; ">社团负责人</view>
<input bindinput="shetuan_fuzeren" placeholder="" maxlength="10" style="border-bottom: 1px solid #a1a1a1;" />
</view>
<view style="display: flex;margin-top: 40rpx;align-items: center;">
<view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">负责人联系方式</view>
<input bindinput="shetuan_lianxi" placeholder="" maxlength="20" style="border-bottom: 1px solid #a1a1a1;" />
</view>
<view style="display: flex;margin-top: 40rpx;align-items: center;">
<view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">招新群号</view>
<input bindinput="find_new_number" placeholder="" maxlength="20" style="border-bottom: 1px solid #a1a1a1;" />
</view>
<view style="display: flex;margin-top: 40rpx;align-items: center;">
<view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">社团描述</view>
<textarea bindinput="description" auto-height="true" maxlength="100" style="border-bottom: 1px solid #a1a1a1;"></textarea>
</view>
<view class="imageRootAll">
<block wx:for="{{imgList}}" wx:key="index">
<view class="imgItem">
<image class="img" src='{{item}}' mode='aspectFill'></image>
<image class="closeImg" bindtap="DeleteImg" src="/images/close.png" data-index="{{index}}" />
</view>
</block>
<!-- 选择图片按钮 -->
<view wx:if="{{imgList.length<3}}" class="imgItem" bindtap="ChooseImage">
<image class="photo" src="../../../images/photo.png"></image>
</view>
</view>
</view>
</view>
<button bindtap="{{chongfu==true?'fabu':''}}" type="primary">发布</button>
前端代码不做过多解释,wx:if控制图片添加的隐藏。
js
Page({
/**
* 页面的初始数据
*/
data: {
imgList: [],
shetuan_title: '',
shetuan_fuzeren: '',
shetuan_lianxi: '',
find_new_number: '',
description: '',
fileIDs: [],
chongfu: true
},
shetuan_title(e) {
var title = e.detail.value
console.log(title)
this.setData({
shetuan_title: title
})
},
shetuan_fuzeren(e) {
var fuzeren = e.detail.value
console.log(fuzeren)
this.setData({
shetuan_fuzeren: fuzeren
})
},
shetuan_lianxi(e) {
var lianxi = e.detail.value
console.log(lianxi)
this.setData({
shetuan_lianxi: lianxi
})
},
find_new_number(e) {
var find_new_number = e.detail.value
console.log(find_new_number)
this.setData({
find_new_number: find_new_number
})
},
description(e) {
var description = e.detail.value
console.log(description)
this.setData({
description: description
})
},
onLoad(options) {
},
//选择图片
ChooseImage() {
wx.chooseImage({
count: 6 - this.data.imgList.length, //默认9,我们这里最多选择6张
sizeType: ['compressed'], //可以指定是原图还是压缩图,这里用压缩
sourceType: ['album', 'camera'], //从相册选择
success: (res) => {
console.log("选择图片成功", res)
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
console.log("路径", this.data.imgList)
}
});
},
//删除图片
DeleteImg(e) {
wx.showModal({
title: '要删除这张照片吗?',
content: '',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
}
}
})
},
fabu(e) {
var that = this
this.setData({
chongfu: false
})
setTimeout(function () {
that.setData({
chongfu: true
})
}, 1500);
//let user = app.globalData.userInfo
let account = wx.getStorageSync('account')
console.log(account)
if (!account || !account.name) {
wx.showToast({
icon: 'error',
title: '请先登陆',
})
setTimeout(() => {
wx.switchTab({
url: '/pages/demo04/demo04',
})
}, 1000);
return
}
if (!this.data.shetuan_title || this.data.shetuan_title.length < 4) {
wx.showToast({
icon: "error",
title: '名称不少于4'
})
return
}
if (!this.data.shetuan_fuzeren || this.data.shetuan_fuzeren.length < 1) {
wx.showToast({
icon: "error",
title: '负责人不为空'
})
return
}
if (!this.data.shetuan_lianxi || this.data.shetuan_lianxi.length < 1) {
wx.showToast({
icon: "error",
title: '联系方式不为空'
})
return
}
if (!this.data.find_new_number || this.data.find_new_number.length < 1) {
wx.showToast({
icon: "error",
title: '群号不为空'
})
return
}
if (!this.data.description || this.data.description.length < 1) {
wx.showToast({
icon: "error",
title: '描述不为空'
})
return
}
//图片相关
let imgList = this.data.imgList
if (!imgList || imgList.length < 1) {
wx.showToast({
icon: "error",
title: '请选择图片'
})
return
}
// if (!this.data.type || this.data.type == '请选择') {
// wx.showToast({
// icon: "error",
// title: '请选择商品类型'
// })
// return
// }
// if (!this.data.school || this.data.school == '请选择所属学校') {
// wx.showToast({
// icon: "error",
// title: '请选择学校'
// })
// return
// }
// if (!this.data.price || parseInt(this.data.price) < 0 || parseInt(this.data.price) > 999999 || parseInt(this.data.price) / 1 !== parseInt(this.data.price)) {
// wx.showToast({
// icon: "error",
// title: '价格不正确'
// })
// return
// }
// if (!this.data.number || this.data.number < 1 || this.data.number > 999 || parseInt(this.data.number) / 1 !== parseInt(this.data.number) || this.data.number == 0) {
// wx.showToast({
// icon: "error",
// title: '数量不正确'
// })
// return
// }
// if (!wx.getStorageSync('account').lianxi) {
// wx.showToast({
// icon: "error",
// title: '无联系方式'
// })
// return
// }
wx.showLoading({
title: '申请中...',
})
var date = new Date();
var Y = date.getFullYear();
var M = date.getMonth() + 1;
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var H = date.getHours()
var min = date.getMinutes()
if (min < 10) {
min = '0' + min
}
if (M < 10) {
M = '0' + M
}
let shetuan_request_time = Y + "-" + M + "-" + D + " " + H + ":" + min
const promiseArr = []
//只能一张张上传 遍历临时的图片数组
for (let i = 0; i < this.data.imgList.length; i++) {
let filePath = this.data.imgList[i]
let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式,获取文件扩展名
//在每次上传的时候,就往promiseArr里存一个promise,只有当所有的都返回结果时,才可以继续往下执行
promiseArr.push(new Promise((reslove, reject) => {
wx.cloud.uploadFile({
cloudPath: '图片/社团/社团上传图片/' + Y + '/' + M + '/' + D + '/' + new Date().getTime() + suffix,
filePath: filePath, // 文件路径
}).then(res => {
// get resource ID
console.log("上传结果", res.fileID)
this.setData({
fileIDs: this.data.fileIDs.concat(res.fileID)
})
reslove()
}).catch(error => {
console.log("上传失败", error)
})
}))
}
//保证所有图片都上传成功
let db = wx.cloud.database()
Promise.all(promiseArr).then(res => {
db.collection('shetuan').add({
data: {
shetuan_title: this.data.shetuan_title,
shetuan_fuzeren: this.data.shetuan_fuzeren,
shetuan_lianxi: this.data.shetuan_lianxi,
find_new_number: this.data.find_new_number,
shetuan_request_time: shetuan_request_time,
touxiangurl: wx.getStorageSync('account').touxiangurl,
imageurl: this.data.fileIDs,
fuzeren_id: wx.getStorageSync('account')._id,
school: wx.getStorageSync('account').school,
description: this.data.description,
member: [],
shetuan_request:false,
requset_loadding:true
//saleid: wx.getStorageSync('account')._id,
//lianxi: wx.getStorageSync('account').lianxi,
},
success: res => {
wx.hideLoading()
wx.showToast({
title: '发布成功',
})
//清空数据
this.setData({
imgList: [],
fileIDs: [],
})
console.log('发布成功', res)
wx.navigateBack({
delta: 1,
})
},
fail: err => {
wx.hideLoading()
wx.showToast({
icon: 'error',
title: '网络不给力....'
})
console.error('发布失败', err)
}
})
})
},
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
js段的最重要的地方就是异步请求的处理,把所选照片上传云存储后,获取返回值,找到上传图片路径的字段,返回。
在外部用for循环多次上传图片,再返回图片的url,最后放入一个数组。
在上传图片外部写个promise,把以上操作都包括在内,最后在promise.all中放入上传的代码,保证all之前的操作都已经完成,再进行上传操作。
wxss
.imageRootAll {
margin: 6rpx ;
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.imgItem {
margin: 6rpx;
position: relative;
width: 200rpx;
height: 200rpx;
background: gainsboro;
margin-top: 50rpx;
}
.img {
width: 100%;
height: 100%;
}
.closeImg {
position: absolute;
right: 0px;
width: 40rpx;
height: 40rpx;
}
.photo {
width: 50%;
height: 50%;
margin: 25%;
}