微信小程序云开发【上传图片入库并渲染】
【微信小程序云开发【上传图片入库并渲染】】笔记 2020-07-29上传一张图片 wxml
js
clickBtn(){
wx.chooseImage({
success:res=>{
console.log(res)
//回调成功之后得到临时路径
var filePath=res.tempFilePaths[0]
this.cloudFile(filePath)
}
})
},
cloudFile(path){
wx.cloud.uploadFile({
//上传要有两个参数，路径文件名
cloudPath:Date.now()+".jpg",
//临时路径filepath
filePath:path
}).then(res=>{
console.log(res)
})
},
上传多张图片并渲染 wxml
js
//全局变量
var urlArr=[];
var filePath=[];
//上传图片产生临时路径
clickBtn(){
wx.chooseImage({
success:res=>{
console.log(res)
filePath=res.tempFilePaths
filePath.forEach((item,idx)=>{
var filename=Date.now()+"_"+idx;
this.cloudFile(filename,item)
})
}
})
},
//上传图片到数据库，产生真实路径
cloudFile(filename,path){
wx.showLoading({
title: '上传中',
})
wx.cloud.uploadFile({
//上传要有两个参数，路径文件名
cloudPath:filename+".jpg",
//临时路径filepath
filePath:path
}).then(res=>{
urlArr.push(res.fileID)
if(filePath.length==urlArr.length){
this.setData({
urlArr
})
}
wx.hideLoading()
})
},
上传图片预览，点击提交入库 wxml
js
//全局变量
var urlArr=[];
var filePath=[];
//上传图片 获取临时路径
clickBtn(){
wx.chooseImage({
success:res=>{
console.log(res.tempFilePaths)
this.setData({
arr:res.tempFilePaths
})
filePath=res.tempFilePaths
}
})
},
//提交图片入库
subBtn(){
filePath.forEach((item,idx)=>{
var filename=Date.now()+"_"+idx;
this.cloudFile(filename,item)
})
},
//提交图片入库函数 得到真实路径 待调用
cloudFile(filename,path){
wx.showLoading({
title: '上传中',
})
wx.cloud.uploadFile({
//上传要有两个参数，路径文件名
cloudPath:filename+".jpg",
//临时路径filepath
filePath:path
}).then(res=>{
urlArr.push(res.fileID)
if(filePath.length==urlArr.length){
this.setData({
urlArr
})
}
wx.hideLoading()
})
},
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）