微信小程序云开发上传多张图片至云存储及修改产生的问题
路径可以使用以下这些,前面是云存储文件夹路径,i是for循环每张图片的数组下标,或用时间,或用随机数,最后面是后缀cloudPath:'images/CampusMap/pictures/' + i /(new Date().getTime())/(Math.floor(Math.random()*1000000))+'.png'如果要修改图片,还要与原来的上传至云存储图片作对比,不然会报错,因为
·
路径可以使用以下这些,前面是云存储文件夹路径,i是for循环每张图片的数组下标,或用时间,或用随机数,最后面是后缀
cloudPath:'images/CampusMap/pictures/' + i /(new Date().getTime())/(Math.floor(Math.random()*1000000))+'.png'
修改图片,如果有已经上传到存储的图片,还要与原来的上传至云存储图片作对比,不然会报错,因为只能用http开头的图片链接,原来图片没有修改的直接赋值即可。对比代码如下:
compare(v){
let flag = false;
this.data.fuben.forEach((w,i)=>{
if(w === v){
console.log("第"+ i +"张图片相同");
flag = true;
}
})
return flag;
},
最重要的是要注意异步问题,比如上传图片和更新数据库这两个过程必须要转为同步,不然数据库没有数据!
var UploadImgs = [];
wx.showLoading({
title: '正在上传图片...',
mask:true
})
let promiseArr = [];//创建一个数组来存储一会的promise操作
//遍历选中的图片,用let定义变量会形成一个闭包,在该作用域执行完之前,变量的值不会发生改变,防止异步导致变量发生变化
for(let i =0; i< this.data.chooseImgs.length;i++){
//往数据中push promise操作
promiseArr.push(new Promise((reslove,reject)=>{
//一个一个取出图片数组的临时地址
let item = this.data.chooseImgs[i];
wx.cloud.uploadFile({
cloudPath:'images/CampusMap/pictures/' + this.data.name+ i +'.png',//上传至云端的路径
filePath: item,//小程序临时文件路径
success: res =>{
//执行成功的吧云存储的地址一个一个push进去
UploadImgs.push(res.fileID);
console.log(res.fileID+"第"+i+"张图片");
//如果执行成功,就执行成功的回调函数
reslove();
wx.hideLoading();
wx.showToast({
title: '上传成功!',
});
},
fail:res=>{
wx.hideLoading();
wx.showToast({
title: '上传失败!!!',
});
}
})
}))
}
Promise.all(promiseArr).then(res=>{//等promose数组都做完后做then方法
console.log("图片上传完成后再执行");
const db = wx.cloud.database();
db.collection('school').add({
data: {
name:this.data.name,
type:1,
detail:this.data.textVal,
imageUrl:UploadImgs
},
success: res => {
// 在返回结果
wx.showToast({
title: '添加成功',
//防止用户反复点击
mask:true,
})
this.setData({
textVal:"",
chooseImgs:[],
name:''
})
setTimeout(function () {
//返回上一个页面
wx.navigateBack({
delta: 1,
})
}, 800)
},
fail: console.error
})
})
ps:多张图片拼接及删除,代码如下:
//点击“+”选择图片
handleChooseImg(){
//调用小程序内置的选择图片api
wx.chooseImage({
count: 9,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success: (result) => {
this.setData({
//图片数组 进行拼接
chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
})
}
})
},
//点击自定义图片组件
handleRemoveImg(e){
//获取被点击的组件的索引
const {index} = e.currentTarget.dataset;
//获取data中的图片数组
let {chooseImgs}=this.data;
//删除元素
chooseImgs.splice(index,1);
this.setData({
chooseImgs
})
},
更多推荐
已为社区贡献2条内容
所有评论(0)