云开发(微信-小程序)笔记(八)----云存储,你来了(中)
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; }
感谢大家,点赞,收藏,关注,评论!