云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。
.wxml
选择图片上传
.js
data: {
// 记录云端fileID
fileID: ''
},
seleteImage: function() {
// 打开相册或相机
wx.chooseMedia({
count: 1, // 可以选几张照片
mediaType: ['image','video'], // 可以选择相片和视频
sourceType: ['album','camera'], // 可以用相机和相册
maxDuration: 30, // 上传timeOut
camera: 'back',
success:(res=>{
this.setData({
imagePath: res.tempFiles[0].tempFilePath,
})
this.up() // 调上传函数
})
})
},
.js
up: function() {
wx.cloud.uploadFile({
cloudPath:new Date().getTime() + ".jpg", // 云端存储的名字
filePath: this.data.imagePath, // 本地文件的地址
success:(res=>{
this.setData({
fileID: res.fileID
})
})
})
},
.js
downloadImage: function() {
wx.cloud.downloadFile({
fileID: this.data.fileID,
success:(res=>{
console.log(res.tempFilePath)
this.setData({
imageName: res.tempFilePath
})
}),
fail:(err=>{ console.log(err) })
})
},
data: {
imagePaths:[], // 存储选择文件地址
imagesFileID:[]。 // 云端文件的fileID
},
seleteMultipleImage: function() {
wx.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album','camera'],
maxDuration: 30,
camera: 'back',
success:(res=>{
for(var i = 0; i< res.tempFiles.length; i++) {
this.data.imagePaths.push(res.tempFiles[i].tempFilePath)
}
var rows = [];
this.upMultipleImages()
})
})
},
最大选择文件数量是count那个参数,如果是选择头像照片,只能选择一张,count: 1就行
imagePaths数组记录选择文件的地址
upMultipleImages:function() {
var rows = [];
this.data.imagePaths.forEach(element => {
var suffix = /\.\w+$/.exec(element)[0];
var newFile = new Date().getTime();
newFile += suffix ;
rows.push(new Promise((resolve,reject) =>{
wx.cloud.uploadFile({
cloudPath: newFile,
filePath: element,
success:(res=>{
this.data.imagesFileID.push(res.fileID);
resolve()
}),
fail:(err=>{ console.log(err)})
})
}))
});
Promise.all(rows).then(res=>{
console.log("**********全部上传成功********")
this.data.imagePaths.length = 0;
this.data.imagesFileID.length = 0;
})
},
上传多个文件也要一个一个的传,没有一次传多个的接口
这里用了Promise, 等都上传完毕以后通知