使用了解api:
1.wx.chooseImage()//上传图片
2.wx.previewImage()//预览图片
3.wx.cloud.uploadFile()//上传至微信云存储
1.wx.chooseImage()上传图片
从本地相册选择图片或使用相机拍照。
//微信小程序文档示例
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
res.tempFilePaths返回实例:
http://tmp/wx683edc816003d2ab.o6zAJswxWKtnsQOuJhiL6wcI5CeE.cudHAXKnW0jZ5665f884721b2d1fbad70ce29aef916d.jpg
这个是可以直接使用在image标签上的
2.wx.preview()预览
//微信官方文档
wx.previewImage({
current: then.data.images[index], // 当前显示图片的http链接
urls: then.data.images// 需要预览的图片http链接列表
})
可能很多了看了官方文档不会弄,其实这个是和wx.chooseImage配套使用的,如果你要使用预览。
首页你要使用
3.wx.cloud.uploadFile()上传至微信云存储
//微信官方文档
wx.cloud.uploadFile({
cloudPath: 'example.png', // 上传至云端的路径
filePath: '', // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
刚开始我看这个有点懵,因为(cloudPath)上传至云端的路径,路径?那个路径?网上很多文章都没写明白,因为上传路径其实和我们平常写路径上有很大不同。
上传至云端路径,其实就是
就拿我的实例
wx.cloud.uploadFile({
cloudPath: 'ZJK_a/' + new Date().getTime() + item.match(/\.[^.]+?$/)[0],
filePath: item, // 文件路径
})
首先,我们肯定是要新建一个文件夹的
1.这个文件夹就是开始的第一个字符串 'ZJK_a/' (自己替换)
2.为什么要new Date().getTime() ,因为这个图片名得要自己去定义的,如果直接用原路径呢
http://tmp/wx683edc816003d2ab.o6zAJswxWKtnsQOuJhiL6wcI5CeE.cudHAXKnW0jZ5665f884721b2d1fbad70ce29aef916d.jpg
就是上面这个,我们不能指望用临时链接做路径,而且会报错的
3.后面的正则就是取临时链接的jpg
filePath呢?下面详说
为什么要上传云端呢
先看看上传云端的返回
cloud://project-dev-6h07v.7072-project-dev-6h07v-1300589920/ZJK_a/1578927314865.jpg
这个返回是云端文件路径,得存储在数据库里,现在我们使用wx.chooseImage获得的只是临时路径,下次我们用的时候就从数据库里取出来
4.详细上传文件实例
通常我们会通过点击事情,去触发弹出图片选择
第一步
chooseImage(e) {//上传图片
let then = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const tempFilePaths = res.tempFilePaths
let data_img = then.data.images //等于当前的data数据里的预定好的空数组images
data_img.push(tempFilePaths[0]) //每选择一张图片就push进去
then.setData({ //push完,马上更新一下
images: data_img //images,可以循环到视图层里
})
}
})
第二步 如果你不预览图片,可以不使用这步,无伤大雅
preview(e) {//预览图片
let index = e.currentTarget.dataset.index //需要设置data-index属性
console.log(e)
let then = this
wx.previewImage({
current: then.data.images[index], // 当前点击(下标的)显示图片的http链接
urls: then.data.images// 需要预览的图片http链接列表
}) },
需要给循环到 视图层里image绑定 preview()事件 (通常是这样做的)
然后点击就可以看到上传到的图片了
第三步 上传云端 wx.cloud.uploadFile
提醒一下images是wx.chooseImage上传获得的,结合上下文
let then = this
this.data.images.map((item, index) => { //多图片就得循环上传,不能一次上传多张
wx.cloud.uploadFile({
//cloudPath :路径解释上文已经解释过了
cloudPath: 'ZJK_a/' + new Date().getTime() + item.match(/\.[^.]+?$/)[0],
filePath: item, // 文件路径 ,循环的当前临时路径
}).then(res => {
// 返回的存储在云端的路径
then.data.cloud_img.push(res.fileID) //更新到数组
if (then.data.images.length == then.datacloud_img.length){ //长度相同,说明已经循环完成
//进行更新到数据库操作
db.collection('userS').doc(options.id).get({
..... //更新到数据库后,可以通过获取数据库的数据去使用 图片了,详细下篇更新
})
}
})
.................end
微信云开发上传图片完成,欢迎diss作者的不足
欢迎加作者询问问题