小程序云开发图片上传
2021-03-07 本文已影响0人
玩点小技术

直接复制代码可用
<view class="mine_avatar_cont">
<view class="mine_avatar_list" wx:for="{{avarat_list}}" wx:key="*this">
<view class="mine_avatar_list_cover"><image src="{{item.avatar}}" mode="aspectFill"></image></view>
<view class="avatar_btn gray_font" wx:if="{{item.status == 1}}" bindtap="delete_avarat_fun" data-item="{{item}}" data-index="{{index}}"><text>审核通过</text> <text>删除</text></view>
<view class="avatar_btn red_font" wx:if="{{item.status == 0}}">审核中</view>
<view class="avatar_btn gray_font" wx:if="{{item.status == 2}}" bindtap="delete_avarat_fun" data-item="{{item}}" data-index="{{index}}">
<text>审核不通过</text> <text>删除</text>
</view>
</view>
<view wx:if="{{avarat_list.length < 10}}" class="mine_avatar_list upload_img" bindtap="upload_user_avatar">
<image src="../images/upload_img.png" mode="aspectFill"></image>
<view>由于个人经费问题</view>
<view>每人最多上传10张个人头像</view>
<view>审核过才可用</view>
</view>
</view>
样式
page{background-color:#f7f7f7;}
.mine_avatar_cont{padding:30rpx 30rpx 0 30rpx;}
.mine_avatar_list{width:335rpx;height:422rpx;background-color:#fff;box-shadow: 0px 6px 6px rgba(211, 211, 211, 0.16);display:inline-block;margin-bottom:30rpx;vertical-align: top;}
.mine_avatar_list:nth-child(odd){margin-right:20rpx;}
.mine_avatar_list .mine_avatar_list_cover{width:100%;height: 335rpx;background-color:#f8f8f8;}
.mine_avatar_list_cover image{width:100%;height: 100%;}
.mine_avatar_list .avatar_btn{height:87rpx;line-height:87rpx;text-align: center;font-size:30rpx;font-weight: 400;color:#B660FF;}
.upload_img{font-size:24rpx;color:#626262;text-align:center;}
.upload_img image{width:130rpx;height:130rpx;margin-top:100rpx;}
.mine_avatar_list .red_font{color:#f00;}
.gray_font text:first-child{color:#999;margin-right:20rpx;}
获取列表
get_list_avatar(){ //这个要在onload里调用
let _this = this
db.collection('user_avatar').where({ //user_avatar数据库表
_openid: _this.data.userInfo.openid,
}).limit(10).get({
success: function(res) {
// res.data 是包含以上定义的两条记录的数组
_this.setData({
avarat_list:res.data
})
console.log(res.data)
}
})
},
上传图片后保存到数据库
upload_user_avatar(){
let _this = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0]
const name = Math.random() * 1000000;
const cloudPath = name + tempFilePaths.match(/\.[^.]+?$/)[0]
console.log(tempFilePaths,cloudPath,'kkk')
wx.showLoading({
title: '正在提交...',
})
wx.cloud.uploadFile({
cloudPath, // 上传至云端的路径
filePath: tempFilePaths, // 小程序临时文件路径
success: res => {
// 返回文件 ID
db.collection("user_avatar").add({
data: {
avatar: res.fileID,
status: '0'
},
success: function () {
wx.showToast({
title: '头像提交成功!',
icon: 'none',
duration: 2000
})
_this.data.avarat_list.unshift({status:0,avatar:res.fileID})
_this.setData({avarat_list:_this.data.avarat_list})
},
fail: function () {
wx.showToast({
title: '图片提交失败!',
icon: 'none',
duration: 2000
})
}
})
console.log(res.fileID)
},
fail: console.error
})
}
})
}
删除图片
delete_avarat_fun(e){ //删除
let _this = this
let obj = e.currentTarget.dataset
wx.showModal({
title: '提示',
content: '确定删除当前头像?',
confirmColor:"#B660FF",
success (res) {
if (res.confirm) {
wx.showLoading({
title: '正在删除...',
})
wx.cloud.deleteFile({
fileList: [obj.item.avatar],
success: res => {
// handle success
if(res.fileList[0].status == 0){
db.collection('user_avatar').doc(obj.item._id).remove({
success: function(res) {
wx.showToast({
title: '删除成功!',
icon: 'none',
duration: 2000
})
_this.data.avarat_list.splice(obj.index,1)
_this.setData({avarat_list:_this.data.avarat_list})
console.log(res.data)
}
})
}
console.log(res.fileList,obj.item.avatar,'成功')
},
fail(){
wx.showToast({
title: '删除失败!',
icon: 'none',
duration: 2000
})
}
})
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
效果图的审核,还未完成