微信小程序云开发-云存储-上传文件(图片/视频)精简代码
2021/7/19 12:35:46
本文主要是介绍微信小程序云开发-云存储-上传文件(图片/视频)精简代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、上传图片和上传视频的代码整合
1.将uploadImg()和uploadVideo()整合成uploadFile()
//上传文件 uploadFile(tempFile,fileName){ //传递两个参数,tempFile是所选文件的临时路径,fileName是上传到云存储的cloudPath的值 console.log("要上传文件的临时路径",tempFile) let timestamp = (new Date()).valueOf() wx.cloud.uploadFile({ cloudPath: fileName, //云存储的路径 filePath: tempFile, // 文件路径 }).then(res => { console.log("上传成功",res) wx.showToast({ title: '上传成功', icon:"success", duration:2000 }) let that = this setTimeout(function(){ that.setData({ videoUrl:res.fileID, imageUrl:res.fileID }) },2000) }) .catch(err => { console.log("上传失败",err); }) }
二、在chooseImg()函数和chooseVideo()函数中分别调用整合后的上传文件函数uploadFile()
1.在chooseImg()函数中调用uploadFile()
chooseImg(){ let that = this wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { console.log("选择成功",res); wx.showLoading({ title: '上传中', }) // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths //调用uploadImg(tempFile)函数,实现图片上传功能 //that.uploadImg(tempFilePaths[0]) //调用uploadFile()实现上传文件功能 let timestamp = (new Date()).valueOf() that.uploadFile(tempFilePaths[0],+timestamp+'.png') //传递两个参数 } }) }
2.在chooseVideo()函数中调用uploadFile()
//第一步:选择要上传的视频 chooseVideo(){ let that = this wx.chooseVideo({ sourceType: ['album','camera'], maxDuration: 60, camera: 'back', success(res) { //console.log(res.tempFilePath); console.log("----------",res.tempFilePath); wx.showLoading({ title: '上传中', }) //调用uploadImg(tempFile)函数,实现图片上传功能 //that.uploadVideo(res.tempFilePath) //调用uploadFile()实现上传文件功能 let timestamp = (new Date()).valueOf() that.uploadFile(res.tempFilePath,+timestamp+'.mp4') //传递两个参数 } }) }
这篇关于微信小程序云开发-云存储-上传文件(图片/视频)精简代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享