微信小程序云开发如何实现上传视频以及图片

最新推荐文章于 2024-12-24 17:54:37 发布

原创最新推荐文章于 2024-12-24 17:54:37 发布 · 1.9k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #数据库

笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用微信小程序云开发功能实现图片和视频的上传。通过简单的代码示例展示了如何选择文件、上传到云端并获取上传后的资源链接。

微信小程序云开发如何实现上传视频以及图片

最基础的数据库增删改查，上传到云存储即可实现，附源码

wxml文件

<button bindtap="upload">上传文件</button>
<button bindtap="uploadvideo">上传视频</button>
<video src="{{videoUrl}}"></video>

js文件

Page({
      data: {
        imgURL:"",
        videoUrl:""
      },
      upload() {
        var myDate = new Date();
        let time = myDate.getTime();
        console.log("点击了上传")
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            console.log("选择成功",res);
            console.log(time),
            wx.cloud.uploadFile ({
              cloudPath: time + '.png',
              filePath: res.tempFilePaths[0],
              success: res => {
                console.log("上传成功",res);
              },
              fail:console.error
            })
          }
        })
      },
      
      uploadvideo() {
        console.log("点击了上传视频");
        wx.chooseVideo({
          sourceType: ['album','camera'],
          maxDuration: 60,
          camera: 'back',
          success(res) {
            console.log("选择视频成功",res);
            wx.cloud.uploadFile ({
              cloudPath: 'aaa.mp4',
              filePath: res.tempFilePath,
              success: res => {
                console.log("上传成功",res);
              },
              fail:console.error
            })
          }
        })
      }

         })