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

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

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

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

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

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

目录
相关文章
|
22天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
3天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
16天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
21天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
27天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
17天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
23天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
771 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
783 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
183 7