先在数据库中添加zhanshilist
在存储添加“甜蜜烘焙蛋糕图片”文件夹
js代码
const app = getApp ()
wx.cloud.init({
env: 'cloud1-0gouysz'
})
const db = wx.cloud.database({
env: 'cloud1-0gouysz'
})
Page({
data:{
ksjiage:'',
imagename:'', //备用图片名称输入框取值
showImg:false,
showVideo:false,
huancunlist:[],
imgUrlsrc:''
},
//生命周期页面加载
onLoad(){
db.collection('zhanshilist').where({}).get({ //读数据库数据
success:res=>{ //本地取用时写法，不能使用success（res）{}
// console.log(res.data) //打印读取出的云端数据
var that=this
that.setData({huancunlist : res.data})//将取出的数据存入用于缓存的变量数组huancunlist
console.log(that.data.huancunlist) //调试打印
}
})
},
//分类名称输入框
nameInput: function (e) { //读取输入框输入内容
this.setData({
imagename:e.detail.value //取输入框值
})
},
//价格输入框
jiageInput: function (e) { //读取输入框输入内容
this.setData({
ksjiage:e.detail.value //取输入框值
})
},
//选择图片按钮
chooseImg:function(){
var that = this
db.collection('zhanshilist').where({kssname:that.data.imagename}).get({
success:res=>{
if (this.data.imagename.length==0){
wx.showModal({ //写入失败提示框
title: '温馨提示：',
content:'请先输入图片分类名称信息',
showCancel:false})
}
else if (that.data.imagename == res.data[0].kssname) {
wx.showModal({ //写入失败提示框
title: '温馨提示：',
content:'该条目已存在',
showCancel:false})
}
else
// if ( that.data.imagename != res.data[0].kssname && that.data.imagename.length != 0 )
{ //选择图片第一步：选择你要上传的图片
wx.chooseImage({
count: 1, //可以选择多少张图片
sizeType: ['original', 'compressed'], //所选的图片的尺寸
sourceType: ['album', 'camera'], //选择图片的来源
})
// success:res=>{
console.log(res.tempFilePaths)
this.uploadFile(res.tempFilePaths[0],'甜觅烘焙蛋糕图片/'+this.data.imagename,1) //图片放在云存储里的img文件夹下
}
// }
}
})
},
// 上传第二步：直接上传到云存储
// type 1 代表图片 type 2 代表视频
uploadFile(tempFile,fileName,type) {
var that = this
console.log("要上传文件的临时路径", tempFile)
wx.cloud.uploadFile({ //将本地资源上传至云存储空间
cloudPath: fileName, //云存储路径
filePath: tempFile //要上传文件资源的路径
})
.then(res => {
console.log('上传成功', res) //res里面有我们向要的图片或视频路径
wx.showModal({
title: '温馨提示：',
content:'上传成功',
showCancel:false})
if (type ==1){ //图片
this.setData({
imgUrl:res.fileID,
showImg:true,//显示图片
showVideo:false//隐藏视频
})
this.setData({imgUrlsrc:imgUrl})
}else if(type == 2 ){//视频
this.setData({
videoUrl:res.fileID,
showImg:false,//隐藏图片
showVideo:true//显示视频
})
}
})
.catch(err => {
console.log('上传失败', err)
wx.showModal({ //写入失败提示框
title: '温馨提示：',
content:'图片上床失败',
showCancel:false})
})
// }})
},
// 上传视频
chooseVideo(){
wx.chooseVideo({
sourceType: ['album','camera'], //从相册选择视频或者拍摄视频
maxDuration: 60, //视频时长
camera: 'back',
success : res=> {
console.log(res.tempFilePath)
this.uploadFile(res.tempFilePath,'甜觅烘焙蛋糕视频/'+'测试视频.mp4',2)
}
})
},
querenInput:function(){ //插入类目按钮事件函数
var that = this
db.collection('zhanshilist').where({kssname:that.data.imagename}).get({
success(res){
if (that.data.imagename.length==0){
wx.showModal({
title:'温馨提示：',
content:'插入图片名称分类不能为空',
showCancel:false
})
}
else if(res.data[0] == null && that.data.imagename != 0 ){
db.collection('zhanshilist').add({
data:{
jiage : that.data.ksjiage,
kssname : that.data.imagename,
xiaoguotu : that.data.imgUrlsrc,
}
})
setTimeout(()=>
{db.collection('zhanshilist').where({}).get({
success:res=>{
that.setData({huancunlist : res.data})
}
})},5000)
wx.showModal({
title: '温馨提示：',
content:'已成功加入新类目',
showCancel:false}) }
else if (this.data.imagename == res.data[0].kssname){
{ wx.showModal({ //写入失败提示框
title: '温馨提示：',
content:'该条目已存在',
showCancel:false})}
}
}})
},
})
wxml代码
<view class='tupian_item'>
<input class='nameinput' bindinput='nameInput' name="tupian" placeholder='**必填，请输入当前图像所属分类，名称' />
view>
<view class='jiage_item'>
<input class='jiageinput' bindinput='jiageInput' name="tupian" placeholder='请输入当前蛋糕价格' />
view>
<button bindtap="chooseImg">选择图片button>
<button bindtap="chooseVideo">选择视频button>
<image class='imageshow' mode="widthFix" wx:if="{{showImg}}" src="{{imgUrl}}">image>
<video class='videoshow' wx:if="{{showVideo}}" src="{{videoUrl}}">video>
<text class='jiageshow'>价格：{{ksjiage}}text>
<button bindtap="querenInput">确认信息并插入数据库button>
<scroll-view class='card'>
<view wx:for-index="index" wx:for="{{huancunlist}}" wx:key="index" wx:-item="item">
<view>
<image class="card1" mode="widthFix" src='{{item.xiaoguotu}}'>image>
view>
<view class="biaohao">{{index +1}} {{item.kssname}}view>
<view class="jiage"> 价格：{{item.jiage}}view>
view>
scroll-view>
为什么会没法上传呢？刚刚开始学习，代码也是东拼西凑的，还请指点。