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

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

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

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

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

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

目录
相关文章
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
28 0
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
15天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
15天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
30 0
|
15天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
38 3
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
35 2
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
29 0