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

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

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

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

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

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

目录
相关文章
|
2月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
2月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
314 1
|
2月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
279 8
|
2月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
208 3
|
2月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
463 0
|
8月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
819 12
|
11月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
509 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
273 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章