云开发(微信-小程序)笔记(九)----云存储,你来了(下)

简介: 云开发(微信-小程序)笔记(九)----云存储,你来了(下)

云开发(微信-小程序)笔记(八)----云存储,你来了(中)

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等文件到本地

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/downloadFile/client.downloadFile.html

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;
}

云开发(微信-小程序)笔记(十)---- 刷新中

感谢大家,点赞,收藏,关注,评论!

目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
29天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
29天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
29天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
2月前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
2月前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
573 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
697 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
125 7