云开发（微信-小程序）笔记（九）----云存储，你来了（下）
云开发（微信-小程序）笔记（八）----云存储，你来了（中）
1.视频上传
官网文档：
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
1.编写js文件
Page({
//选择上传的视频
chooseVideo(){
wx.chooseVideo({
sourceType: ['album','camera'], //从相册选择视频或拍摄视频
maxDuration: 60, //视频时长（s）
camera: 'back',
success: res => {
this.uploadFile(res.tempFilePath,'cat god 007.mp4', 2)
}
})
},
//上传视频到云存储
uploadVideo(temFile){
console.log('视频文件临时路径',temFile)
wx.cloud.uploadFile({
cloudPath: 'cat god 007.mp4',
filePath: temFile, //视频文件路径
success: res => {
console.log('上传视频成功',res)
},
fail(err){
console.log('上传视频失败',err)
}
})
},
})
2.编写wxml文件
<button bindtap="chooseVideo">请上传视频</button>
2.对图片，视频上传进行优化
主要优化在于js部分
1.优化js部分
// pages/cloud storag/cloud storag.js
Page({
data: {
showImg: false,
showVideo: false,
fileId: ''
},
//选择上传的图片
chooseImg(){
wx.chooseImage({
count: 1, //选择多少张图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], //设置图片来源
success: res => {
this.uploadFile(res.tempFilePaths[0],'cat god 007.jpg', 1) //将上传的第一张图片传入uploadImg方法中
}
})
},
//选择上传的视频
chooseVideo(){
wx.chooseVideo({
sourceType: ['album','camera'], //从相册选择视频或拍摄视频
maxDuration: 60, //视频时长（s）
camera: 'back',
success: res => {
this.uploadFile(res.tempFilePath,'cat god 007.mp4', 2)
}
})
},
//上传图片，视频到云存储(1:照片，2：视频)，并对上传的照片或视频进行展示
uploadFile(temFile,fileName,type){
console.log('图片文件临时路径',temFile)
wx.cloud.uploadFile({
cloudPath: fileName,
filePath: temFile, //图片文件路径
success: res => {
console.log('上传成功')
if (type == 1){
this.setData({
imgUrl: res.fileID,
showImg: true, //显示照片
showVideo: false //隐藏视频
})
} else if (type == 2){
this.setData({
videoUrl: res.fileID,
showImg: false, //隐藏照片
showVideo: true //显示视频
})
}
},
fail(err){
console.log('上传失败',err)
}
})
},
2.编写wxml部分
<!--pages/cloud storag/cloud storag.wxml-->
<button bindtap="chooseImg">请上传图片</button>
<button bindtap="chooseVideo">请上传视频</button>
<image wx:if="{{showImg}}" src="{{imgUrl}}"></image>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>
效果图
3.上传world,pdf等文件到云存储
官网文档：
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html
例1:上传文件（上传所有文件）
1.编写js部分
Page({
//选择文件
chooseFile(){
wx.chooseMessageFile({
count: 10,//选择多少个文件
type: 'all',
success: res =>{
console.log(res)
this.uploadFile(res.tempFiles[0].name,res.tempFiles[0].path)
}
})
},
//上传文件到云存储
uploadFile(name,tempUrl){
wx.cloud.uploadFile({
cloudPath: name,
filePath: tempUrl,
success: res => {
console.log("上传成功",res)
}
})
}
}）
2.编写wxml部分
<button bindtap="chooseFile">上传文件</button>
3.进行调试，测试
4.从云存储下载world,pdf等文件到本地
1.编写js文件
Page({
//获取用户输入的下载链接
getContent(e){
this.setData({
fileId: e.detail.value
})
},
//下载文件
downloadFile(){
let fileId = this.data.fileId
console.log('下载链接',fileId)
if (fileId != null && fileId.length > 0){
wx.cloud.downloadFile({
fileID: fileId
})
.then( res => {
console.log('下载文件成功',res)
//打开下载的文件
// wx.openDocument({
// filePath: res.tempFilePath,
// success: function (res) {
// console.log('打开文档成功')
// }
// })
})
.catch( res =>{
console.log('下载文件失败',res)
})
})
2.编写wxml文件
请输入下载链接
<input bindinput="getContent"></input>
<button bindtap="downloadFile">下载文件</button>
效果图如下
5.上传，下载并查看已下载好的文件
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
1.编写并修改js文件
Page({
data: {
fileId: ''
},
//选择文件
chooseFile(){
wx.chooseMessageFile({
count: 1,//选择多少个文件
type: 'all',
success: res =>{
console.log(res)
this.uploadFile(res.tempFiles[0].name,res.tempFiles[0].path)
}
})
},
//上传文件到云存储
uploadFile(name,tempUrl){
wx.cloud.uploadFile({
cloudPath: name,
filePath: tempUrl,
success: res => {
console.log("上传成功",res)
}
})
},
//获取用户输入的下载链接
getContent(e){
this.setData({
fileId: e.detail.value
})
},
//下载文件
downloadFile(){
let fileId = this.data.fileId
console.log('下载链接',fileId)
if (fileId != null && fileId.length > 0){
wx.cloud.downloadFile({
fileID: fileId
})
.then( res => {
console.log('下载文件成功',res)
//打开下载的文件
wx.openDocument({
filePath: res.tempFilePath,
success: function (res) {
console.log('打开文档成功')
}
})
})
.catch( res =>{
console.log('下载文件失败',res)
})
}else{
wx.showToast({
icon: 'none', //不要勾
title: '下载链接为空',
})
}
}
})
2.修改wxml,显示到界面
<button bindtap="chooseFile">上传文件</button>
请输入下载链接
<input bindinput="getContent"></input>
<button bindtap="downloadFile">下载文件</button>
3.修改wxss,显示边框
/* pages/cloud storag/cloud storag.wxss */
input{
border: 1px solid gray;
}
感谢大家，点赞，收藏，关注，评论！
