文章目录
1.代码实现
只需三个api即可实现,api在官网的具体位置:
选择视频的api
选择图片的api
上传本地资源到云存储的api
选择视频比较简单,直接参照官网的代码即可实现,我们现在需要的是如何一次上传多张图片到云存储中。
由于上传本地资源的api一次性只能上传一个,所以我们只能使用循环遍历来实现,但是又需要指定图片的名字格式cloudPath,如果两次上传的名字格式相同的话,第二次的图片则会覆盖掉第一次的图片,这样显然没法实现我们想要上传多张图片的需求。
我们可以设计一个随机数来动态改变cloudPath,这样即可。
代码如下(示例):
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: '',
videoUrl: ''
},
//将视频上传到云存储
upLoadVidep(name, tempFilePath) {
wx.cloud.uploadFile({
cloudPath: name,
filePath: tempFilePath, // 文件路径
success: res => {
// get resource ID
console.log(res.fileID)
},
fail: err => {
// handle error
}
})
},
//将图片上传到云端
upLoadImg(tempFilePaths) {
tempFilePaths.forEach((v, i) => {
//每次遍历产生一个随机数 使其称为图片的名字,这样就算选择多次也不会重复
let x = Math.random() * 100 + '.jpg'
//console.log(i);
wx.cloud.uploadFile({
cloudPath: x,
filePath: v, // 文件路径
success: res => {
// get resource ID
console.log(res.fileID)
},
fail: err => {
// handle error
}
})
})
},
//点击选择图片
chooseImg() {
//选择图片的api
wx.chooseImage({
//一次选择图片的最大数量
count: 9,
//图片的尺寸
sizeType: ['original', 'compressed'],
//图片的来源
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res);
// tempFilePath可以作为img标签的src属性显示图片
this.setData({
//数组的解构拼接
imgUrl: [...this.data.imgUrl, ...res.tempFilePaths]
})
const tempFilePaths = res.tempFilePaths
this.upLoadImg(tempFilePaths)
}
})
},
//点击选择视频
chooseVideo() {
wx.chooseVideo({
//视频的来源。相册和拍摄视频
sourceType: ['album', 'camera'],
//视频的时长
maxDuration: 60,
//默认拉起前置或者后置摄像头
camera: 'back',
success: (res) => {
this.setData({
videoUrl: res.tempFilePath
})
let tempFilePath = res.tempFilePath
let name = 'examp.mp4'
this.upLoadVidep(name, tempFilePath)
}
})
}
})
完成之后可在云数据库的云存储中查看。